为什么Datatables用Ajax加载数据时索引列(Index column)被覆盖?

  1. 描述你的问题
    我修改Ajax示例加入索引列(Index column),但是索引列被data属性值覆盖,请问如何解决?谢谢!

  2. 贴上相关代码

var t = $(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt",
        "columns": [
            { "data": null },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );
t.on( 'order.dt search.dt', function () {
    t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

索引列示例
Ajax示例

阅读 6.5k
2 个回答

前两天也遇到这个问题,现在解决了所以来说出我的解决方案
第一覆盖了可能是服务器模式开启不正确 "bServerSide": true,//是否开启服务器模式这样开启是不正确的应该是
"serverSide": true,正常情况下如果不开启服务器模式 用延迟加载数据就可以,//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力"deferRender": true 但是手册上有写“**需要注意的是,如果这个选项打开,正如大家都知道的,不是所有的行Node是可以被访问的, 所以当你使用API的方法时,例如 columns().nodes()DT , 你就必须考虑到这个情况。下面展示了一个例子,演示在这种情况下如何使用jQuery的代理事件。" 所以下面的那个常规方式就用不了了。开启服务器模式后 在服务器端

       $i=$page_start;
    foreach($list as $k=>$v){
        $list[$k]['id']=$i++;
    }

就可以正常输出行号了!希望对你有帮助。
clipboard.png
clipboard.png

columns: [{
    title: '序号',
    data: function(row, type, set, meta) {
        var api = new $.fn.dataTable.Api(meta.settings);
        return api.page.info().start + meta.row + 1;
    }
}]
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进