zoukankan      html  css  js  c++  java
  • 使用jquery datatables插件遇到fnReloadAjax的问题

    1 官网地址:http://www.datatables.net/

    2 基本参数介绍 http://blog.csdn.net/mickey_miki/article/details/8240477 (这里已经介绍的很详细了)

    如果要使用ajax请求数据的话应使用fnReloadAjax   官网上有插件 http://www.datatables.net/plug-ins/api

    3 遇到的问题:服务数据返回格式,fnReloadAjax修改,调用fnReloadAjax,初始化datatable

     服务返回数据格式:

     1         $re = $joinerObj->findAll($conditons);
     2         if($re){
     3         foreach($re as $k=>$v){
     4 //                $listArray['aaData'][$k]['joinerid'] ='<input type="checkbox" value="'.$v['joinerid'].'" name="shopId" delTag="delId">';
     5             $listArray['aaData'][$k]['joinerid'] = "<input type='checkbox' value=".$v['joinerid']." name='delJoiner' delTag='delId' class='checkNetMusic' attr_aid=".$v['aid']."/>";    
     6 //            $listArray['aaData'][$k]['aid'] = $v['aid'];
     7 //            $listArray['aaData'][$k]['appid'] = $v['appid'];
     8             $listArray['aaData'][$k]['name'] = $v['name'];
     9             $listArray['aaData'][$k]['tel'] = $v['tel'];
    10             $listArray['aaData'][$k]['time'] = date('Y-m-d',$v['time']);
    11             $listArray['aaData'][$k]['message'] = $v['message'];
    12             $listArray['aaData'][$k]['company'] = $v['company'];
    13             }
    14         echo json_encode($listArray);
    15         }else{
    16             echo '{  "aaData": []}';
    17             }

    关于ReloadAjax的修改:

    主要是修改这里

    for ( var i=0 ; i<json.aaData.length ; i++ )
            {
                that.oApi._fnAddData( oSettings, json.aaData[i] );
            }
    $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
    {
        if ( sNewSource !== undefined && sNewSource !== null ) {
            oSettings.sAjaxSource = sNewSource;
        }
     
        // Server-side processing should just call fnDraw
        if ( oSettings.oFeatures.bServerSide ) {
            this.fnDraw();
            return;
        }
     
        this.oApi._fnProcessingDisplay( oSettings, true );
        var that = this;
        var iStart = oSettings._iDisplayStart;
        var aData = [];
     
        this.oApi._fnServerParams( oSettings, aData );
     
        oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
            /* Clear the old information from the table */
            that.oApi._fnClearTable( oSettings );
     
            /* Got the data - add it to the table */
            var aData =  (oSettings.sAjaxDataProp !== "") ?
                that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )(json) : json;
            for ( var i=0 ; i<json.aaData.length ; i++ )
            {
                that.oApi._fnAddData( oSettings, json.aaData[i] );
            }
             
            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
     
            that.fnDraw();
     
            if ( bStandingRedraw === true )
            {
                oSettings._iDisplayStart = iStart;
                that.oApi._fnCalculateEnd( oSettings );
                that.fnDraw( false );
            }
     
            that.oApi._fnProcessingDisplay( oSettings, false );
     
            /* Callback user function - for event handlers etc */
            if ( typeof fnCallback == 'function' && fnCallback !== null )
            {
                fnCallback( oSettings );
            }
        }, oSettings );
    }

    初始化和调用:

    aoColumnDefs 需要和服务器返回的列数以及table的head头的列数保持一致
    发送ajax请求:registerMainTable.fnReloadAjax('produce.php?c=activitymanage&a=joinerInfo&appid='+appid+'&aid='+aid);
           var optsortable={
                "bJQueryUI": true,
                "aoColumns": [
                    { "mDataProp": "joinerid" },
                    { "mDataProp": "name" },
                    { "mDataProp": "tel" },
                    { "mDataProp": "time" },
                    { "mDataProp": "message" },
                    { "mDataProp": "company" }
                ],
                "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] },{ "bSortable": false, "aTargets": [ 1 ] },{ "bSortable": false, "aTargets": [ 2 ] },{ "bSortable": false, "aTargets": [ 3 ] },{ "bSortable": false, "aTargets": [ 4 ] },{ "bSortable": false, "aTargets": [ 5 ] }],
                "sPaginationType": "full_numbers",
                /*语言设置*/
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_条",
                    "sZeroRecords": "没有找到符合条件的数据",
                    "sProcessing": "<img src=’./loading.gif’ />",
                    "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
                    "sInfoEmpty": "没有记录",
                    "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                    "sSearch": "搜索:",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前一页",
                        "sNext": "后一页",
                        "sLast": "尾页"
                    }
                }                            };
                                 
            var registerMainTable = $("#newsTable1").dataTable(optsortable);
            $("#newsTable tbody a").live('click',function(){
                $("#activitylist").css('display','none');
                var aid = $(this).closest('a').attr('aid');
                var appid = $("#appid").val();
                registerMainTable.fnReloadAjax('produce.php?c=activitymanage&a=joinerInfo&appid='+appid+'&aid='+aid);
                 $("#details").css('display','block');
            });

    html页面中使用table

    <table id="newsTable1"  width="100%" cellpadding="0" cellspacing="1" bgcolor="#999999">
                    <thead>
                        <tr class="ui-widget-header ">
                            <th><input type="checkbox" id="checkJoiner"/></th> 
                            <th>姓名</th>
                            <th>电话</th>
                            <th>时间</th>
                            <th>留言</th>
                            <th>公司</th>
                        </tr>
                    </thead>
                    <tbody id="joinInfo"></tbody>
                </table>

     关于删除行的问题:需要使用oTable.fnDeleteRow();

    比如:$.each(b,function(){oTable.fnDeleteRow(this)});

        function delJioner(){
            var b=new Array();
            var a=new Array();
            var optsortable={bRetrieve:true,oLanguage:{sLengthMenu:"每页显示 _MENU_ 条",sZeroRecords:"没有数据。",sInfo:"_START_ / _END_ ,共 _TOTAL_ 条",sInfoEmpty:"没有记录。",sInfoFiltered:"(筛选自_MAX_条信息)",sSearch:"搜索:"},aoColumnDefs:[ { "bSortable": false, "aTargets": [ 0 ] },{ "bSortable": false, "aTargets": [ 1 ] },{ "bSortable": false, "aTargets": [ 2 ] },{ "bSortable": false, "aTargets": [ 3 ] },{ "bSortable": false, "aTargets": [ 4 ] },{ "bSortable": false, "aTargets": [ 5 ] }],};
            var oTable=$("#newsTable1").dataTable(optsortable);
            var appid = $('#appid').val();
        
    
            $("input[delTag='delId']").each(function(){
                if($(this).attr("checked")=="checked"){
                    a.push($(this).attr("value"));
                    b.push(this.parentNode.parentNode);
                }
            });
            if(a.length==0){
                alert("请选择条目!");
                return
            }
            if(!confirm("确定要删除记录吗?")){
                return false
            }
            $("#netNewsTabs").mask("请稍候...");
            $.ajax({
                type:"post",
                url:"produce.php?c=activitymanage&a=delMultiJoiner&appid="+appid+"&delList="+a.toString(),
                success:function(msg){
                    var data = eval(msg);
                    var err_code = data[0].err_code;
                    var err_msg = data[0].err_msg;                         
                    if(err_code != 0 )
                    {
                        alert(err_msg);                               
                        return false;
                    }else{
    //                    $.each(b,function(){$(this).closest('tr').hide();}); 
                        $.each(b,function(){oTable.fnDeleteRow(this)});
                        alert(err_msg);
                        $("#netNewsTabs").unmask();
                    }        
            
            
                },
                error:function(){
                    alert("网络请求失败,请重试!");
                    $("#netNewsTabs").unmask();
                }
            })
        }
  • 相关阅读:
    python:dataclass装饰器详
    python : tuple 相加,注意逗号
    python itertools chain()
    Python classmethod 修饰符
    ILMerge
    a标签点击后页面显示个false
    Visual Studio自动生成XML类和JSON类
    元组简单示例
    jQuery插件示例笔记
    jQuery中的Ajax全局事件
  • 原文地址:https://www.cnblogs.com/RightDear/p/3285095.html
Copyright © 2011-2022 走看看