在后端分頁的情況下，怎么做到跳轉自定義頁面？
0x01 難點：
一. 怎么添加自定義代碼？
前提：datatables在整個html加載完畢后，進行datatables數據的渲染，並且把右下角的 “上頁 頁碼 下頁” 加載出來。
問題：因此，在script中的選擇器能定位到 "id=dynamic-table_paginate" 的div元素(datatables 右下角頁碼跳轉部分，下稱 “跳轉DIV”) ，但此時該元素內容並未被datatables填充；即使將自定義代碼append填充入該元素，也會在之后datatables填充時被去除掉。
如果在“跳轉DIV”后添加同級元素，因CSS關聯了DIV的內容，所以十分難調整。
解決方法：
采用fnDrawCallback：在HTML加載完畢，且datatables渲染完畢后執行，此刻能夠“跳轉DIV”標簽已加載渲染完畢，能夠在其中填充代碼了。
選擇在"跳轉DIV"子元素的ul標簽后添加自定義元素代碼（即 class="my_dataTables_jump"部分）
二. 表單數據渲染后，“跳轉DIV”部分的頁數怎么改變？
頁數也即 <ul class="nagination">部分的頁碼怎么修改？
網上查了許多資料，用table.api().page().draw(false)；但是報錯沒有api()函數，也無法理解。
另一方面，自己寫js去修改也不可取，工作量大重復造輪。
解決方法：
這里使用page()函數，參考官方文檔：https://datatables.net/reference/api/page()
table.page( 想要跳轉的頁碼減一 ).draw( 'page' );
//因采用索引值，所以要減一；draw('page')，參數 'page' 字符串為參數，不是偽代碼之類。
關於page()中的draw('page')，為什么draw並且其中傳入參數 'page'，參考官方文檔 https://datatables.net/reference/api/draw()
所以跳轉時，取跳轉框中的值，和最小最大頁碼值進行條件判斷，使用table.page(跳轉頁面).draw('page') 進行跳轉。
0x02 代碼
后端部分代碼不變
前端部分 HTML CSS JS：
/*
*
* HTML部分
*
* */
<textarea id="jump_page_html" style="display:none">
<div class="my_dataTables_jump">
<span class="btn">
跳轉
</span>
<input type='text' id='jump_page_space' class='btn'>
<button type="button" id="jump_page_button" class="jump_button btn">確認</button>
</div>
</textarea>
/*
*
* CSS部分
*
* */
.jump_button{
width: 54px;
height: 33px;
color: #fff;
background: #65CEA7;
}
.my_dataTables_jump{
display:inline-block;
float:right;
margin-top:15px;
position: relative;
top:4px;
left:4px;
}
.my_dataTables_jump span{
width: 54px;
height: 33px;
border:1px solid #EFF2F7;
background-color: #EFF2F7;
color:#535351;
cursor: auto;
}
.my_dataTables_jump span:hover{
color:#535351;
}
.my_dataTables_jump input{
height:34px;
width: 65px;
border:1px solid #EFF2F7;
background-color: #EFF2F7;
}
/*
*
* javascript部分
*
* */
var table = $("#dynamic-table").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自動調整列寬 stripeClasses: ["odd", "even"], //為奇偶行加上樣式，兼容不支持CSS偽類的場合 processing: true, //隱藏加載提示,自行處理 serverSide: true, //啟用服務器端分頁 searching: false, //禁用原生搜索 orderMulti: false, //啟用多列排序 order: [], //取消默認排序查詢,否則復選框一列會出現小箭頭 renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers columnDefs: [{ "targets": 'nosort', //列的樣式名 "orderable": false //包含上樣式名‘nosort’的禁止排序 }],
// 添加自定義跳轉 "fnDrawCallback": function () { var jump_page = $('#jump_page_html').text(); //選擇textarea中預存的代碼 $("#dynamic-table_paginate").append(jump_page); $("#jump_page_button").click(function(){ jump_page_action(); }); }, ajax: function (data, callback, settings) {
//自定義跳轉頁碼
var jump_page = $('#jump_page_space').val();
if(jump_page){
param.start = (jump_page-1)*param.limit; //將跳轉頁碼傳入封裝數據給后端
}
$.ajax({
....................
data: param, //傳入組裝的參數
....................
})
//***
//以下省略，不是本篇關注點
},
})
//跳轉函數——頁碼修改、表單數據重構-即重發ajax進行渲染
function jump_page_action(){
var page = parseInt($('#jump_page_space').val());//要轉整形
var page_num = parseInt($('#dynamic-table_next').prev().children('a').text()); //選取“下一頁” 前一個元素的值，也就是最大頁數
if(page >= 1 && page <= page_num) { //跳轉的頁數在可選范圍中（大於等於1，小於等於最大頁）
table.page(page - 1).draw('page'); //
}
}
0X03
在另一個新項目中，table.page(page - 1).draw('page') 無法跳轉頁面。
使用 table.page(page-1).draw(false) 才能跳轉頁面。思考原因，可能是上面一個項目用datatables1.9，而這一個使用datatables1.10，兩者的api有所區別。
蛋疼的是，找不到1.9的文檔，似乎版本更新后原有文檔都沒了，沒法確定是否是1.9與1.10的版本區別問題。
//添加跳轉html元素，作為datatables渲染時的參數 "fnDrawCallback": function () { var jump_page = $('#jump_page_html').text(); $("#urlList_paginate").append(jump_page); $("#jump_page_button").click(function(){ jump_page_action(); }); },
//頁面跳轉代碼，放在datatables渲染后 function jump_page_action(){ var page = parseInt($('#jump_page_space').val());//要轉整形 var page_num = parseInt($("#urlList_next").prev().children('a').text()); if(page >= 1 && page <= page_num) { console.log(urltable.page()) urltable.page(page-1).draw(false); } };
有趣的是，這兩串js，第一串用到了第二處定義的函數，第二處用到了第一處的對象。你中有我，我中有你，雞生蛋蛋生雞，有趣。