使用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

服务返回数据格式：

         $re = $joinerObj->findAll($conditons);

         if($re){

         foreach($re as $k=>$v){

 //                $listArray['aaData'][$k]['joinerid'] ='<input type="checkbox" value="'.$v['joinerid'].'" name="shopId" delTag="delId">';

             $listArray['aaData'][$k]['joinerid'] = "<input type='checkbox' value=".$v['joinerid']." name='delJoiner' delTag='delId' class='checkNetMusic' attr_aid=".$v['aid']."/>";

 //            $listArray['aaData'][$k]['aid'] = $v['aid'];

 //            $listArray['aaData'][$k]['appid'] = $v['appid'];

             $listArray['aaData'][$k]['name'] = $v['name'];

             $listArray['aaData'][$k]['tel'] = $v['tel'];

             $listArray['aaData'][$k]['time'] = date('Y-m-d',$v['time']);

             $listArray['aaData'][$k]['message'] = $v['message'];

             $listArray['aaData'][$k]['company'] = $v['company'];

             }

         echo json_encode($listArray);

         }else{

             echo '{  "aaData": []}';

             }

关于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();

            }

        })

    }

巴特西

使用jquery datatables插件遇到fnReloadAjax的问题

最新文章

热门文章