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提示错误,不过不用管,可以正常运行。

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

  • 相关阅读:
    左孩子右兄弟的字典树
    UVA 1401 Remember the Word
    HDOJ 4770 Lights Against Dudely
    UvaLA 3938 "Ray, Pass me the dishes!"
    UVA
    Codeforces 215A A.Sereja and Coat Rack
    Codeforces 215B B.Sereja and Suffixes
    HDU 4788 Hard Disk Drive
    HDU 2095 find your present (2)
    图的连通性问题—学习笔记
  • 原文地址:https://www.cnblogs.com/zhengbn/p/5853611.html
Copyright © 2011-2022 走看看