zoukankan      html  css  js  c++  java
  • jquery插件dataTables自增序号。

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

     1     $('#dataList').dataTable({
     2         "language": {
     3             "sProcessing"    : "<div ><img src='/NJLD_MONITOR/pt/common/images/load.gif'><span>计算中...</span></div>", 
     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"    : 0
    43             },
    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提示错误,不过不用管,可以正常运行。

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

  • 相关阅读:
    Docker(二)Image 与网络
    Docker(一)概念与基础
    Apache Hudi 介绍与应用
    Flink读写Kafka
    Flink 应用的一致性保障
    Flink系统配置
    Flink架构(五)- 检查点,保存点,与状态恢复
    Flink架构(四)- 状态管理
    HBase 中读 HDFS 调优
    Nginx模块之http.md
  • 原文地址:https://www.cnblogs.com/zhengbn/p/5853611.html
Copyright © 2011-2022 走看看