jQuery插件dataTables添加序號(hào)列的方法
更新時(shí)間：2016年07月06日 10:45:13 作者：菜碼農(nóng)先生
這篇文章主要介紹了jQuery插件dataTables添加序號(hào)列的方法的相關(guān)資料,需要的朋友可以參考下
官網(wǎng)方法實(shí)例：
$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [[1, 'asc']]
});
t.on('order.dt search.dt',
function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
試了一下，然后發(fā)現(xiàn)會(huì)報(bào)draw方法找不到之類(lèi)的，可能是因?yàn)榘姹締?wèn)題，用的是1.12.10版本的。
所以又發(fā)現(xiàn)有熱心網(wǎng)友分享一下方法，是可以的。
定義{"data": null,"targets": 0},一個(gè)空列，然后在dataTables中添加方法：
"fnDrawCallback": function(){
var api = this.api();
var startIndex= api.context[0]._iDisplayStart;//獲取到本頁(yè)開(kāi)始的條數(shù)
api.column(0).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
}
網(wǎng)址鏈接：http://datatables.club/example/api/counter_columns.html
以上所述是小編給大家介紹的jQuery插件dataTables添加序號(hào)列的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Jquery dataTables.treeGrid的樹(shù)形插件使用
- Jquery Datatables的使用詳解
- jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】
- jQuery Datatables表頭不對(duì)齊的解決辦法
- jQuery插件DataTables分頁(yè)開(kāi)發(fā)心得體會(huì)
- JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁(yè)
- jQuery中Datatables增加跳轉(zhuǎn)到指定頁(yè)功能
- jquery表格datatables實(shí)例解析 直接加載和延遲加載
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- jQuery插件datatables使用教程
- jQuery DataTables 專(zhuān)業(yè)表格插件實(shí)用教程
相關(guān)文章
jQuery lazyload 的重復(fù)加載錯(cuò)誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件，原意是按需加載，當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)進(jìn)行加載，但是官方的插件經(jīng)過(guò)firebug的檢測(cè)可知，并不能節(jié)省流量開(kāi)支，反而有重復(fù)加載的現(xiàn)象。2010-11-11
jQuery點(diǎn)擊后一組圖片左右滑動(dòng)的實(shí)現(xiàn)代碼
主要是用作圖片展示的時(shí)候需要，點(diǎn)擊后一組圖片左右滑動(dòng)，需要的朋友可以參考下
2012-08-08 
圖片的切換時(shí)一個(gè)常用的功能。下面實(shí)現(xiàn)的是一個(gè)點(diǎn)擊數(shù)字來(lái)進(jìn)行圖片的切換。學(xué)習(xí)jquery的朋友可以參考下原理。
2011-02-02 
這篇文章主要介紹了使用jQuery寫(xiě)的fadeTo,需要的朋友可以參考下
2014-02-02 
這篇文章主要介紹了微信小程序組件 marquee實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06 
jQuery 學(xué)習(xí)第五課 Ajax 使用說(shuō)明
關(guān)于ajax早已不是新鮮話題，而jQuery使ajax變得無(wú)比簡(jiǎn)單。
2010-05-05 
jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實(shí)例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡(jiǎn)單使用技巧,需要的朋友可以參考下
2018-09-09 
這篇文章主要介紹了Jquery彈出層插件ThickBox的使用方法,需要的朋友可以參考下
2014-12-12 
jquery拖拽效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jquery拖拽效果實(shí)現(xiàn)方法,詳細(xì)介紹了jQuery實(shí)現(xiàn)拖拽功能的具體步驟與相關(guān)技巧,并附代碼了demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01