jquery.datatables得到当前页码及调整到指定页码

最新推荐文章于 2024-08-01 11:09:48 发布

Irvin-bin

最新推荐文章于 2024-08-01 11:09:48 发布

阅读量1.8w

点赞数 4

分类专栏： datatables插件文章标签： datatables

本文链接：https://blog.csdn.net/bin470398393/article/details/78551373

版权

datatables插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery.datatables作为一款实用的表格插件，使用起来方便，高度灵活，为传统的HTML表格新增了很多实用的交互功能，最近都在使用这插件，也遇到了一些问题，为方便自己和他人特在此做简单的记录。

1、如何在操作后，重新加载本页面数据，常见操作：编辑、删除等

function reload(){
		var oTable = $("#table1").dataTable(); //table1为表格的id
		var tableSetings=oTable.fnSettings();  
		var paging_length=tableSetings._iDisplayLength;//当前每页显示多少  
		var page_start=tableSetings._iDisplayStart;//当前页开始  
		var page=(page_start / paging_length); //得到页数值  比页码小1
		oTable.fnPageChange(page);//加载跳转
	}

只需操作完之后，调用上述代码即可；

2、如何实现跳转到指定页面功能，常见操作：分页列表中跳转到具体一页

	$('#tableId').dataTable({  
                    fnDrawCallback: function(table) {  
                        $("#tableId_paginate").append("  到第 <input style='height:28px;line-height:28px;width:40px;' class='margin text-center' id='changePage' type='text'> 页  <a class='btn btn-default shiny' style='margin-bottom:5px' href='javascript:void(0);' id='dataTable-btn'>确认</a>");  
                        var oTable = $("#tableId").dataTable();  
                        $('#dataTable-btn').click(function(e) {  
                            if($("#changePage").val() && $("#changePage").val() > 0) {  
                                var redirectpage = $("#changePage").val() - 1;  
                            } else {  
                                var redirectpage = 0;  
                            }  
                            oTable.fnPageChange(redirectpage);  
                        });  
                    }  
         });

只需在声明/定义中添加fnDrawCallback参数就可以了。其中选择器tableId是表格的id属性，而tableId_paginate选择器是在插件生成的分页条的div的id。
3、如何避免从后台获取表格数据时，数据为空，出现弹出框提示信息，但界面仍加载的问题

"aoColumns": [{            	"data": "fileId",//
            	"mRender":function (data, type, full) {//返回自定义的样式 
          	    if(data!=null&&data!=""){
          	    	return data;
          	    }else{
          	    	return "";
          	    } 
  	    	  }
            },
...
]

在 aoColumns获取返回字段时，在每列添加如上判断即可，fileId为某一字段名称

4、后续补充