公司项目里,使用的是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. Java入门:JDK与Eclipse之类的集成开发工具的关系

    JDK是Java Development Kit,也就是说Java开发所需的工具包.有了这个东西,一切Java开发理论上都不是问题了.当然,根据你下载的版本不同,可能擅长的领域不同.通常大家都是用JD ...

  2. css基础--简单介绍css

    --引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  3. AVC的三种规格

    AVC其实就是H.264标准,是由ITU-T和ISO/IEC组成的联合视频组(JVT,Joint Video Team)一起开发的,ITU-T给这个标准命名为H.264(以前叫做H.26L),而ISO ...

  4. linux 系统下IntelliJ IDEA的安装及使用

    由于刚刚进入研究生阶段,通过几个月对大数据的学习,从java到hadoop,再到scala到spark.在这我写一下我在ubuntu系统下intelliJ IDEA的安装和配置.首先我的ubuntu系 ...

  5. elasticsearch-head插件安装说明

    下载及安装readme https://github.com/mobz/elasticsearch-head 安装: npm install npm run start 访问:http://local ...

  6. ashx误删后,未能创建类型

    描述 今天,因为临时有事儿,需要去一趟其他城市,项目比较赶.所以只能在车上继续敲代码,倒霉的触摸板让我误删一个ashx一般处理程序.好死不死的这个文件的代码还很长. 我的做法是[垃圾桶]→[还原]→V ...

  7. Spring Aop、拦截器、过滤器的区别

    Filter过滤器:拦截web访问url地址.Interceptor拦截器:拦截以 .action结尾的url,拦截Action的访问.Spring AOP拦截器:只能拦截Spring管理Bean的访 ...

  8. 【数据库】SQL经典面试题 - 数据库查询 - 子查询应用二

    上节课我们通过子查询,完成了查询的最高分学生的需求,今天我们来学习子查询的分类,以及通过子查询来完成工作中经常遇到一些个性化需求. 子查询概念: 一个SELECT语句嵌套在另一个SELECT语句中,子 ...

  9. webSQL 增删改查

    webSQL 增删改查  转载于:https://www.cnblogs.com/liuhao-web/p/7866032.html /** *数据库操作辅助类,定义对象.数据操作方法都在这里定义 * ...

  10. 20155303 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    20155303 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一(新建文件夹): ...