一、解決方案
在湯原等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都做網(wǎng)站、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需設(shè)計網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站制作,湯原網(wǎng)站建設(shè)費(fèi)用合理。
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 >跳轉(zhuǎn)第</b><input id="searchNumber"/><b >頁</b>');
2.監(jiān)聽文本框的change事件,執(zhí)行插件的調(diào)轉(zhuǎn)頁面方法
//調(diào)轉(zhuǎn)到指定頁面索引 ,注意大小寫 var oTable = $('#example1').dataTable(); oTable.fnPageChange(page);
3.插件繪制成功后,綁定文本框的值
//繪制的時候觸發(fā),綁定文本框的值 table.on('draw.dt', function (e, settings, data) { var info = table.page.info(); //此處的page為0開始計算 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>編號</th> <th>姓名</th> <th>性別</th> <th>生日</th> <th>班級</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 >跳轉(zhuǎn)第</b><input id="searchNumber"/><b >頁</b>'); //綁定分頁事件----在切換分頁的時候觸發(fā) //table.on('page.dt', function () { // var info = table.page.info(); // console.info('Showing page: ' + info.page + ' of ' + info.pages); //}); //繪制的時候觸發(fā),綁定文本框的值 table.on('draw.dt', function (e, settings, data) { var info = table.page.info(); //此處的page為0開始計算 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); }); });
顯示如下:
以上所述是小編給大家介紹的JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
新聞名稱:JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁
分享URL:http://bm7419.com/article32/psdopc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、營銷型網(wǎng)站建設(shè)、服務(wù)器托管、建站公司、App設(shè)計、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)