给datatable添加序号列

最新推荐文章于 2025-04-07 15:47:45 发布

冬天de离别

最新推荐文章于 2025-04-07 15:47:45 发布

阅读量9.2k

点赞数 1

分类专栏： datatable 文章标签： datatable 序号

本文链接：https://blog.youkuaiyun.com/zhaoxuan0417/article/details/62423223

版权

datatable 专栏收录该内容

1 篇文章

订阅专栏

1、在html中添加一个序号列

<table id="dynamic-table">
     <thead>
          <tr>
              <th width="10%">序号</th>
              <th width="45%">项目名称</th>
              <th width="45%">项目编号</th> 
          </tr>
     </thead>

     <tbody>

     </tbody>
</table>

2、js中定义一个null的列

var col = [
    	{"data": null},
        {"data": 'projectName'},
        {"data": 'projectCode'}
]

3、datatable

var myTable = $('#dynamic-table')
        .DataTable({
            "bAutoWidth": true,
            "scrollY": 'auto',
            "aaSorting": [],
            "bFilter": false,
            "bLengthChange": false,
            select: {
                style: 'single'
            },
            "processing": true,
            "serverSide": true,
            ajax: function (data, callback, settings) {
                var params = {
                    //请求参数     
                }
                demo.ajax.postUrl("/summary/getPage.serv",
                    params,
                    function (返回数据) {
                        if () {
                            callback({
                                
                            });
                        }
                        else {
                            
                        }
                        //alert(ret);
                        return;
                    }, true
                )
                //callback(JSON.parse( localStorage.getItem('dataTablesData') ));
            },
            columns: col,

            //字段显示配置及转换
            "columnDefs": [
            	{"searchable": false, "orderable": false, "className": "hidden-xs hidden-sm", "targets": 0},
                {"searchable": true, "orderable": false, "className": "hidden-xs hidden-sm", "targets": 1},
                {"searchable": true, "orderable": false, "className": "hidden-xs hidden-sm", "targets": 2}
            ]            
        });
    //为datatable增加序号
    myTable.on('order.dt search.dt',function(){
    	myTable.column(0,{
    		search: 'applied',
    		order: 'applied'
    	}).nodes().each(function(cell,i){
    		i = i + 1;
    		var page = myTable.page.info();
    		var pageno = page.page;
    		var length = page.length;
    		var columnIndex = (i+pageno*length);
    		cell.innerHTML = columnIndex;
    	});
    }).draw();