datatable 初始化显示非第一页数据

6 篇文章 0 订阅

最近做项目使用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次

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现分页功能,你需要先确定当前页数和每页显示的行数。假设你想每页显示五行数据,那么你需要计算出总页数,即总记录数除以每页显示的行数,向上取整。 下面是一个简单的分页方法,用来调用 DataTable 中的数据: ``` // 定义每页显示的行数 const rowsPerPage = 5; // 定义当前页数 let currentPage = 1; // 计算总页数 const totalRows = filteredData.length; const totalPages = Math.ceil(totalRows / rowsPerPage); // 分页方法 function paginateData() { // 计算起始和结束的索引 const startIndex = (currentPage - 1) * rowsPerPage; const endIndex = startIndex + rowsPerPage; // 获取当前页的数据 const currentPageData = filteredData.slice(startIndex, endIndex); // TODO: 将数据渲染到页面上 // 更新分页按钮状态 updatePaginationButtons(); } // 更新分页按钮状态 function updatePaginationButtons() { // 获取分页按钮元素 const prevButton = document.querySelector("#prev-button"); const nextButton = document.querySelector("#next-button"); // 根据当前页数更新按钮状态 if (currentPage === 1) { prevButton.disabled = true; } else { prevButton.disabled = false; } if (currentPage === totalPages) { nextButton.disabled = true; } else { nextButton.disabled = false; } } // 上一页按钮点击事件 function handlePrevPage() { if (currentPage > 1) { currentPage--; paginateData(); } } // 下一页按钮点击事件 function handleNextPage() { if (currentPage < totalPages) { currentPage++; paginateData(); } } // 初始化分页 paginateData(); // 绑定分页按钮事件 const prevButton = document.querySelector("#prev-button"); const nextButton = document.querySelector("#next-button"); prevButton.addEventListener("click", handlePrevPage); nextButton.addEventListener("click", handleNextPage); ``` 以上代码中,`paginateData` 方法用来根据当前页数和每页显示的行数获取当前页的数据,并将数据渲染到页面上。`updatePaginationButtons` 方法用来更新上一页和下一页按钮的状态,如果当前页是第一页,则禁用上一页按钮;如果当前页是最后一页,则禁用下一页按钮。`handlePrevPage` 和 `handleNextPage` 方法分别用来处理上一页和下一页按钮的点击事件,更新当前页数并重新渲染数据。 请注意,以上代码仅供参考,实际实现可能需要根据具体情况做出适当调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值