最近在做後臺管理系統,普遍用到了datatables這個插件,挺好用的,由於第一次用走了好多彎路,記下來吧!中文官網的上api可以看看的還是http://www.datatables.club/
- 關於進入詳情返回上一頁的頁碼
開始走了好多彎路,從後臺傳入頁碼值放到href裏,到詳情頁獲取到頁碼數然後放到localStorage裏,然後就可以再返回上一頁時就可以獲取到頁碼數。這個方法固然可以,是常規的思想,但是datatables插件裏就有初始化的配置!bStateSave: true(狀態保存),但是又有個問題,就是返回時及時在刷新也會是保存的狀態,沒有什麼辦法,只能清楚緩衝localStorage.clear();但是瀏覽器上的刷新按鈕還是個bug。。 - 關於增加跳轉到指定頁面的input
網上查了好多方法,都是修改插件的源文件,可以不用,直接在ajax返回後執行就可以了!代碼如下:
//增加跳轉指定頁數功能
$("<span style='margin:0 10px 0 10px;'>到第</span><input type='text' id='changePage' class='input-text' style='width:50px;height:27px'><span style='margin-left:10px;'>頁</span>").appendTo('ul.pagination');
$('#changePage').keydown(function(e){
if(e.keyCode==13){
oTable = $("#newrecords").dataTable();
if($(this).val() && $(this).val()>0){
var redirectpage = $(this).val()-1;
}else{
var redirectpage = 0;
}
oTable.fnPageChange( redirectpage );
}
});
附上一個完整的項目中部分:
<script src="/dist/js/jquery.dataTables.min.js"></script>
<script src="/dist/js/dataTables.bootstrap.min.js"></script>
<script>
//分頁
$(function () {
var lang = {
"sProcessing": "處理中...",
"sLengthMenu": "每頁 _MENU_ 項",
"sZeroRecords": "沒有匹配結果",
"sInfo": "當前顯示第 _START_ 至 _END_ 項,共 _TOTAL_ 項。",
"sInfoEmpty": "當前顯示第 0 至 0 項,共 0 項",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數據爲空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁",
"sJump": "跳轉"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
var table = $("#newrecords").dataTable({
language:lang, //提示信息
autoWidth: false, //禁用自動調整列寬
stripeClasses: ["odd", "even"], //爲奇偶行加上樣式,兼容不支持CSS僞類的場合
processing: true, //隱藏加載提示,自行處理
serverSide: true, //啓用服務器端分頁
searching: true, //禁用原生搜索
orderMulti: false, //啓用多列排序
searchable:true,
bStateSave: true, //狀態保存
order: [], //取消默認排序查詢,否則複選框一列會出現小箭頭
// renderer: "bootstrap", //渲染樣式:Bootstrap和jquery-ui
pagingType: "simple_numbers", //分頁樣式:simple,simple_numbers,full,full_numbers
"columnDefs": [{
"bSortable": false,//指定某列不可排序
"aTargets": [4,10,11,12]//指定某列不可排序
}],
// "order": [[0, 'asc']],//默認按照第一行排序
ajax: function (data, callback, settings) {
//封裝請求參數
var param = {};
param.limit = data.length;//頁面顯示記錄條數,在頁面顯示每頁顯示多少項的時候
param.draw = data.draw;
param.search =data.search.value;//搜索條件
param.sort = data.order[0];//排序[{colunm:'第幾列',dir:'排序方式'}]
param.start = parseInt(data.start);//開始的記錄序號
param.page = (data.start / data.length)+1;//當前頁碼
//需要另外傳給後臺的參數
var starttime = dateToUnix($('#starttime').val());
var endtime = dateToUnix($('#endtime').val());
param.starttime = starttime;
param.endtime = endtime;
if($('.selectedInfor').eq(0).css('display')=='block'){
var dep = $('.selectedInfor').eq(0).find('label').text();
}else{
var dep = '';
}
param.dep = dep;
//ajax請求數據
$.ajax({
type: "GET",
url: "/records/page",
cache: false, //禁用緩存
data: param, //傳入組裝的參數
dataType: "json",
success: function (result) {
//封裝返回數據
// console.log(result.draw)
var data = result.data;
$.each(data,function (i) {
data[i].in_hos = getLocalTime(data[i].in_hos*1000);
data[i].out_hos = getLocalTime(data[i].out_hos*1000);
})
var returnData = {};
returnData.draw = param.draw;//這裏直接自行返回了draw計數器,應該由後臺返回
returnData.total = result.total;//返回數據全部記錄條數
returnData.recordsFiltered = result.recordsFiltered;//後臺不實現過濾功能,每次查詢均視作全部結果
returnData.data = data;//返回的數據列表
//調用DataTables提供的callback方法,代表數據已封裝完成並傳回DataTables進行渲染
//此時的數據需確保正確無誤,異常判斷應在執行此回調前自行處理完畢
callback(returnData);//自動填充數據到表格
//增加跳轉指定頁數功能
$("<span style='margin:0 10px 0 10px;'>到第</span><input type='text' id='changePage' class='input-text' style='width:50px;height:27px'><span style='margin-left:10px;'>頁</span>").appendTo('ul.pagination');
$('#changePage').keydown(function(e){
if(e.keyCode==13){
oTable = $("#newrecords").dataTable();
if($(this).val() && $(this).val()>0){
var redirectpage = $(this).val()-1;
}else{
var redirectpage = 0;
}
oTable.fnPageChange( redirectpage );
}
});
},
});
},
//列表表頭字段,data值和後臺返回的callback函數會對應找到以下data值進行填充
columns: [
{ "data": 'num',"render":function(data,type,row,meta){
return '<a class="num" style="color:#697ECC;" href="/pdf/index?file=/'+row.src+'&rid='+row.num+'&draw='+row.draw+'&start='+row.start+'">'+row.num+'</a>'
}},
{"data":'name'},
{"data":'gender'},
{"data":'age'},
{"data":'code'},
{"data":'department'},
{"data":'doctor'},
{"data":'in_hos'},
{"data":'out_hos'},
{"data":'hos_number'},
{"data": 'pageNum' },
{"data":'homepage'},
{"data":'src',"render":function(data,type,row,meta){
return '<a style="color:#697ECC;" href="/pdf/index?file=/'+row.src+'&draw='+row.draw+'&start='+row.start+'">查看病歷</a>'
}}
],
fnDrawCallback:function(){
// alert($('#changePage').attr('class'))
}
}).api();