JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁

2019-11-19 16:22:42

字體：大中小

供稿：網(wǎng)友

一、解決方案

1.添加自定義工具欄，嵌入文本框

 "dom": 'l<"toolbar">frtip', //自定義工具欄 //設(shè)置工具欄內(nèi)容 //l - length changing input control //f - filtering input //t - The table! //i - Table information summary //p - pagination control //r - processing display element [javascript] view plain copy print?$("div.toolbar").html(' <b style="color:red">跳轉(zhuǎn)第</b><input id="searchNumber"/><b style="color:red;">頁</b>');

2.監(jiān)聽文本框的change事件，執(zhí)行插件的調(diào)轉(zhuǎn)頁面方法

//調(diào)轉(zhuǎn)到指定頁面索引 ，注意大小寫 var oTable = $('#example1').dataTable(); oTable.fnPageChange(page);

3.插件繪制成功后，綁定文本框的值

//繪制的時(shí)候觸發(fā)，綁定文本框的值 table.on('draw.dt', function (e, settings, data) {   var info = table.page.info();   //此處的page為0開始計(jì)算   console.info('Showing page: ' + info.page + ' of ' + info.pages);    $('#searchNumber').val(info.page + 1); });

二、完整示例代碼

<table id="example1" class="table table-hover table-striped">   <thead>     <tr>       <th>編號(hào)</th>       <th>姓名</th>       <th>性別</th>       <th>生日</th>       <th>班級(jí)</th>     </tr>   </thead> </table> $(function () {   //注意方法名為DataTable   var table = $('#example1').DataTable({     "dom": 'l<"toolbar">frtip', //自定義工具欄     "pagingType": "full_numbers",     lengthMenu: [3, 5, 10],     processing: true,//是否使用進(jìn)度條     serverSide: true,//是否啟用數(shù)據(jù)庫加載     ajax: {       url: '/tableone/getlist',       type: 'post',       data: function (d) {         d.name = '張三';         /*         * 自定義aja參數(shù)         * 特別說明，此處可以重寫控件的默認(rèn)參數(shù)，比如分頁參數(shù)         */         // d.start = 0;         //console.info(d);         //var page = $('#searchNumber').val();         //page = parseInt(page) || 1;         //d.start = (page - 1) * d.length;       }     },     //指定列綁定的字段     columns: [       { data: 'sno' },       { data: 'sname' },       { data: 'ssex' },       { data: 'sbirthday' },       { data: 'class' }     ],     order: [       [3, 'desc']     ]   });   $("div.toolbar").html(' <b style="color:red">跳轉(zhuǎn)第</b><input id="searchNumber"/><b style="color:red;">頁</b>');   //綁定分頁事件----在切換分頁的時(shí)候觸發(fā)   //table.on('page.dt', function () {   //  var info = table.page.info();   //  console.info('Showing page: ' + info.page + ' of ' + info.pages);   //});   //繪制的時(shí)候觸發(fā)，綁定文本框的值   table.on('draw.dt', function (e, settings, data) {     var info = table.page.info();     //此處的page為0開始計(jì)算     console.info('Showing page: ' + info.page + ' of ' + info.pages);     $('#searchNumber').val(info.page + 1);   });   //監(jiān)聽文本框更改   $('#searchNumber').change(function () {     var page = $(this).val();     page = parseInt(page) || 1;     page = page - 1;     //調(diào)轉(zhuǎn)到指定頁面索引 ，注意大小寫     var oTable = $('#example1').dataTable();     oTable.fnPageChange(page);   }); });

顯示如下：