首页 > 代码库 > jquery插件dataTables自增序号。

jquery插件dataTables自增序号。

dataTables官网提供了一种方式,使用后没有达到预期效果(js报错),没有深究原因。如果需要,可以按照下面的方式来。

 1     $(‘#dataList‘).dataTable({ 2         "language": { 3             "sProcessing"    : "<div ><img src=http://www.mamicode.com/‘/NJLD_MONITOR/pt/common/images/load.gif‘>计算中...
", 4 "lengthMenu" : "每页显示 _MENU_", 5 "zeroRecords" : "没有找到记录", 6 "info" : "_GOPAGE_ 当前 _PAGE_/ _PAGES_ 页 共_TOTAL_条", 7 "infoEmpty" : "无记录", 8 "infoFiltered" : "(从 _MAX_ 条记录过滤)", 9 "oPaginate" : { 10 "sFirst" : "首页",11 "sPrevious" : "上一页", 12 "sNext" : "下一页", 13 "sLast" : "尾页" 14 }15 },16 "bLengthChange" : false, 17 "bInfo" : false,18 "bPaginate" : false,19 "sDom" : ‘rt<"bottom "<"pCus "pli>>‘,20 "bProcessing" : true,21 "serverSide" : true,22 "bSort" : false,23 "sAjaxSource" : "/NJLD_MONITOR/ControlPlan/caculateLngLat.do",24 "scrollY" : h, 25 "fnServerData" : retrieveData,26 "fnServerParams" : function(aoData){27 aoData.push({"name":"startDate" ,"value" : $(‘#startDate‘).val()}),28 aoData.push({"name":"days" ,"value" : $(‘#days option:selected‘).val()})29 },30 "fnDrawCallback" : function(){31   this.api().column(0).nodes().each(function(cell, i) {32     cell.innerHTML = i + 1;33   });34 },35 "aoColumns" : [36 {37 "sTitle" : "序号",38 "sClass" : "dt-center",39 "bSortable" : false,40 "sWidth" : "4%",41 "data" : null,42 "targets" : 043 },44 {45 "sTitle" : "日期",46 "mDataProp" : "date",47 "sClass" : "dt-center",48 "bSortable" : false,49 "sWidth" : "12%"50 },{51 "sTitle" : "开灯时间(日落)",52 "mDataProp" : "sunrise",53 "sClass" : "dt-center",54 "bSortable" : false,55 "sWidth" : "12%"56 },{57 "sTitle" : "关灯时间(日出)",58 "mDataProp" : "sunset",59 "sClass" : "dt-center",60 "bSortable" : false,61 "sWidth" : "10%"62 }63 ]64 });

重要的是这一段:

        "fnDrawCallback"    : function(){          this.api().column(0).nodes().each(function(cell, i) {            cell.innerHTML =  i + 1;          });        },

效果:

技术分享

 

注意,这段js可以会被IDE提示错误,不过不用管,可以正常运行。

技术分享

原理就是每次填充一行时,先获取这一行的第一列,赋值为序号。序号就是填充到第几行了。

jquery插件dataTables自增序号。