Datatables使用之增加序号（1.10新版实现）

以前用EasyUI的，但是最近想做前端的表格，找到了JQuery的Datatables插件，非常不错。

本来以为给表格加一个序号很简单，可是看了Datatables的官方实现看似代码也不简单，测试发现了一些问题，用的不爽。网络上并没有搜索到好的解决方案，就跟踪代码，自己找到了一种方法，本文在最后就给出了这种实现。

1、版本问题

最新的版本1.10，和以前版本做了很大的调整，但是也部分兼容老版本Api的使用。不过官网给出的例子都是新版的使用方式。

新老版本对照表，可以参照 http://dt.thxopen.com/upgrade/1.10-convert.html。

2、表格增加序号列（官方）

官网提供了一个例子 http://www.datatables.net/examples/api/counter_columns.html

测试页如下

    
        
             图书信息
        
    

             

图书信息

                                                                                    序号                         图片                         名称                         作者                         出版社                         出版日期                                                                                              

    

    

测试效果如下

总是会提示一个有一个错误

问题的说明 https://datatables.net/manual/tech-notes/4。但是这个说明不能提供任何帮助。

点击这个确定按钮后，出现下面的列表。

上图，序号列没有值，其实下了断点知道，draw()执行的时机比较早，会被column的data数据null刷掉。

官方的例子没有给出更多信息，而且我觉得上面的代码实现很复杂，而且资料少，我也不知道提示如何消除，而且是否值得花时间解决呢。

总之，最后成功的刷出第一页的序号列，但是第二页、第N页失败。我是动态从后端返回json数据。

3、data实现（方便，非官方实现）

自己动手丰衣足食啊，既然column的data可以是一个函数，那么就看看参数中的数据。结果确实发现了一些有用的数据，开始动手。

代码如下：

    
        
             图书信息