公司项目里,使用的是jquerydatatable框架来展示数据的,在使用的时候遇到一个问题,就是要自动生成序号,且在分页的时候,下一页的序号紧跟着前一页的序号,下面是代码:

"fnDrawCallback"    : function(){
var api = this.api();
var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
api.column(0).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
}, "aoColumns" : [
{"sTitle":"序号", "mDataProp": null,"targets": 0,"sClass": "center", "bSortable": false, "sWidth": "80"}
]

还有一种情况是,每一页都是从1开始的:

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

补个图

第一种:

第二种:

小结

这是在工作中遇到的问题,记下来下次遇到可以直接用了。两种情况我都试了,都是可以的。例子原文

Jquery Datatable自动生成序号的更多相关文章

  1. 页面定制CSS代码初探(六):h2、h3 标题自动生成序号 详细探索过程

    前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...

  2. Jquery实现自动生成二级目录

    在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...

  3. css3 -- 自动生成序号(不使用JS,可任意排序)

    需求:一个table 需要在第一列生成序号:1.2.3.4.5......  并且自适应行数 不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,最后采用CSS的一个计数器方法实现! & ...

  4. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[id] fro ...

  5. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[name] f ...

  6. datatable自动增加序号

    { "targets": [0], "visible": true, "render": function (data, type, ful ...

  7. [JSP] c:forEach 输出序号 每行自动生成序号

    关键在于<c:forEach>的varStatus属性,具体代码如下: <table width="500" border="0" cells ...

  8. 如何在jasperreport自动生成序号

    在导出报表时,有时候我们需要显示序号,有两种方法: 1.就是再加一个字段,就是说将序号也当做是要导出的字段来处理,然后用程序给这个字段赋值,这方面有点傻,就不说了. 2.利用jasperreport提 ...

  9. WPF DataGrid自动生成序号

    需求和效果 应用WPF技术进行开发的时候,大多都会遇到给DataGrid添加序号的问题,今天分享一下查阅了很多stackoverflow的文章后,总结和改进过来的方法,先看一下效果图,文末附Demo下 ...

随机推荐

  1. 利用solr实现商品的搜索功能

      后期补充: 为什么要用solr服务,为什么要用luncence? 问题提出:当我们访问购物网站的时候,我们可以根据我们随意所想的内容输入关键字就可以查询出相关的内容,这是怎么做到呢?这些随意的数据 ...

  2. PhantomJS的替代品--无头浏览器(Headless Chrome)

    在使用PhantomJS时候,出现提示: UserWarning: Selenium support for PhantomJS has been deprecated, please use hea ...

  3. python基础之赋值/深copy/浅copy

    首先,不管是赋值还是深浅copy,都是针对那些可能会产生变化的值进行区分的,也就是对于数字,字符串来说,区分赋值,深浅copy是毫无意义的. 那么,让我们来对那些可变的像list set dict t ...

  4. CoreDNS配置kubernetes作为后端

    概述 coredns之所以如此名声大噪,就是因为从kubernetes1.9开始引入,作为kubernetes内部服务发现的默认dns.毫无疑问kubernetes是coredns的后端之一,所以我们 ...

  5. python 类与对象解析

    类成员:    # 字段        - 普通字段,保存在对象中,执行只能通过对象访问        - 静态字段,保存在类中,  执行 可以通过对象访问 也可以通过类访问            # ...

  6. [洛谷P4491] [HAOI2018]染色

    洛谷题目链接:[HAOI2018]染色 题目背景 HAOI2018 Round2 第二题 题目描述 为了报答小 C 的苹果, 小 G 打算送给热爱美术的小 C 一块画布, 这块画布可 以抽象为一个长度 ...

  7. lvm--pv丢失后恢复

    [root@db-backup ~]# vgcfgrestore vg_backup  Couldn't find device with uuid JgYDQu-R1AG-wrD2-AHpX-A14 ...

  8. TPL概要

    ReaderWriterLockSlim.读写锁,允许多个线程同时获取读锁,但同一时间只允许一个线程获得写锁,因此也称作共享-独占锁.只有等到对象被写入锁占用的时候,才会阻塞 Barrier .它允许 ...

  9. 兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法

    兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...

  10. STL-map and multimap

    定义 map<int,int> a; map<int,string> a; map<double,int> a; …… 首先要知道的一些 Map是STL的一个关联容 ...