使用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();
            }
        })
    }