最近做项目使用datatable显示表格信息,分页的,每条可以点击查看详细信息,打开详细信息后还可以返回到分页页面,同时要求显示的页数还是查看的那个页数,上网查了很久,没发现想要实现的功能示例,只能自己对着api的说明尝试实现,做了半天终于实现了,可能不是很好的方法,但是毕竟实现了...
如果有更好的方法实现,欢迎留言说明。下面介绍详细的实现方法。
页面JS:
/**
* 商品基础信息查询
*/
var oTable;
var isInit = true;
var page = $("#page").val();
$(function(){
//初始化
initDataTable();
$('#search').click(function(){
oTable.ajax.reload();
});
});
function showBaseInfo(relateid){
var info = oTable.page.info();
var page =info.page;
var fromdate = $('#fromdate').val();
var retdate = $('#retdate').val();
var fromairport = $('#fromairport').val();
var toairport = $('#toairport').val();
var url = "editBaseInfo?relateid="+relateid+"&page="+page;
if(fromdate!=''){
url +="&fromdate="+fromdate;
}
if(retdate!=''){
url +="&retdate="+retdate;
}
if(fromairport!=''){
url +="&fromairport="+fromairport;
}
if(toairport!=''){
url +="&toairport="+toairport;
}
window.location.href=url;
}
function initDataTable() {
oTable = $('.examples').DataTable({
"dom": '<"top">rt<"bottom"ip><"clear">',
"ajax": {
"type": "POST",
"url": "query.ajax",
"data": function(d) {
//这里判断是否是初始化以及非第一页,那么就会修改start值,修改为当前页数*每页显示数。
if(isInit&& parseInt(page)!=0){
d.start = parseInt(page)*10;
}
d.fromdate = $('#fromdate').val(),
d.retdate = $('#retdate').val(),
d.fromairport = $('#fromairport').val(),
d.toairport = $('#toairport').val();
}
},
//"processing": true,
"serverSide": true,
"ordering": false,
"aLengthMenu": [5, 10, 20, 40 ],
"iDisplayLength" : 10,
"oLanguage": {
"sUrl": "../static/js/datatable.cn.txt"
},
"aoColumns": [
{"mDataProp":"id"},
{"mDataProp":"relateid"},
{"mDataProp":"importdate"},
{"mDataProp":"fromairport"},
{"mDataProp":"toairport"},
{"mDataProp":"transferairport"},
{"mDataProp":"fromdate"},
{"mDataProp":"todate"},
{"mDataProp":"price"},
{"mDataProp":"tax"},
{"mDataProp":"total"},
{"mDataProp":"stocks"},
{"mDataProp":"currentstocks"},
{"mDataProp":"takebackstocks"},
{"mDataProp":"status"}
],
"columnDefs": [
{
"targets": 0,
"visible": false
},
{
"targets": 5,
"render":function(data,type,row){
if(data==''){
return "无";
}
return data;
}
},
{
"targets": 10,
"render":function(data,type,row){
return row.price+row.tax;
}
},
{
"targets": 14,
"render":function(data,type,row){
if(data==0){
return "已导入";
}else if(data==1){
return "校验成功";
}else if(data==2){
return "校验失败";
}else if(data==3){
return "已投放";
}else if(data==4){
return "已调价投放";
}
}
},
{
"render": function ( data, type, row ) {
return '<a class="btn btn-info btn-xs" href="javascript:void(0);" οnclick="javascript:showBaseInfo(' + row.relateid + ')" title="查看"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>查看</a> ' ;
},
"targets": 15
}
],
"initComplete": function(settings, json) {
//这里在初始化完成后修改一下显示的页数
if(isInit&& parseInt(page)!=0){
isInit = false;
oTable.page(parseInt(page)).draw(false);
}
}
});
}
说明一下:
这里面的那些其他条件都是项目中的查询条件,其中要实现初始化不显示第一页,核心的就是在ajax的时候判断是在初始化,同时不是第一页,然后就会修改start参数的值(即sql中的从那一条开始查)。
但是只修改start参数的值的话,虽然查询出来的结果是正确的,但是显示的页数确实错误的,会显示为第一页。必须在 initComplete 回调函数中对页面显示进行修改,本来通过代码:
oTable.page(parseInt(page)).draw(false);
来翻页的话是可以直接实现翻页的,但是不知道为什么在初始化回调函数中直接使用只会修改页数,而数据不回修改,所以2个结合起来就能实现初始化不显示第一页的功能了,我这个应该也是取巧了,或者巧合了,如果有更好更简单的方式能实现的话,希望留言。谢谢.
补充一下,我这个方法的话,只会向服务器请求一次查询,不会进行2次