jQuery datatables使用 ( 封装类实现前台分页二续...)

最新推荐文章于 2020-04-30 10:04:22 发布

ABCJIECBA

最新推荐文章于 2020-04-30 10:04:22 发布

阅读量1w

点赞数 1

分类专栏： JQuery 文章标签： datatables jquery string stylesheet xmlhttprequest function

本文链接：https://blog.csdn.net/abcjiecba/article/details/6866199

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

封装的公用分页的工具类：

package com.sintai.util;

import java.util.ArrayList;

import java.util.List;

public class PageUtil<T> {

// 分页静态不变属性

public static final String SIZE = "size"; //每页显示的记录数

public static final String CURPAGE = "curPage"; //总页数

private long total;

private List<T> data = new ArrayList<T>();

//省略set get 方法

@Override

public String toString() {

return "PageUtil [data=" + data + ", total=" + total + "]";

}

后台Action：

/**

* 分页时每页跨度数量

private String parm_iDisplayStart;

/**

* DataTable请求服务器端次数

private String parm_sEcho;

/**

* 数组的数组，表格中的实际数据.

private String[][] aaData;

/**

* 给前台的数据

private DataTableReturnObject tableReturnObject =null;

/**

* 传参

private String parm_name;

// 省略了get set 方法

@Action("/findAllSite")

public String findAllSite(){

List<SiteManagement> siteListPage=null;

int totle = 0;

try {

Map<String, Object> params = new HashMap<String, Object>();

int ri = Integer.parseInt(parm_iDisplayStart);

int cup = (int) (ri / 10) + 1;

params.put(PageUtil.CURPAGE, cup);

params.put(PageUtil.SIZE, 10);

PageUtil<SiteManagement> pageUtil = siteManagementManager.queryByPager(params, parm_name);

siteListPage = pageUtil.getData();

totle = (int) pageUtil.getTotal();

} catch (Exception e) {

e.printStackTrace();

return "updateUserERROR";

}

// resultArr数组封装了页面要显示的数据以及页面显示数据的各种格式

String[][] resultArr = new String[siteListPage.size()][];

for (int i = 0; i < resultArr.length; i++) {

String[] resultOne = new String[4]; //封装前台页面需要现实的数据

SiteManagement site = siteListPage.get(i);

int oID = site.getSiteManagementID();

resultOne[0] = "<input type='checkbox' name='organizationId' value='" + oID + "' οnclick='sOrgaId("+i+")' />";

resultOne[1] = site.getSiteName();

resultOne[2] =site.getSiteTel() ;

resultOne[3] =site.getSiteFax();

resultArr[i] = resultOne;

}

aaData = resultArr;

tableReturnObject = new DataTableReturnObject(totle, totle, parm_sEcho, aaData);

return "ajax";

}

前台分页显示页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<%@ include file="../taglibs.jsp" %>

<!—需要引入的固定样式和js文件-->

</head>

<body>

<thead>

<tr>

</th>

</tr>

</thead>

<!—自动接收后台数据，按规定格式显示-->

</tbody>

</table>

</form>

</fieldset>

</body>

var sAjaxSource="findAllSite.action";

var aoColumns=[ //设定各列宽度

{"sWidth": "10%"},

{"sWidth": "30%"},

{"sWidth": "30%"}

];

var iDisplayLength=10;

var tableId="#organizationTable";

var oTable;

/**

* 后台分页

function retrieveData( sSource, aoData, fnCallback ) {

aoData.push({"name":"name","value":$("input[name='siteName']").val()});

for(var i=0;i<aoData.length;i++) {

//alert(aoData[i].name);

aoData[i].name="parm_"+aoData[i].name.toString();

}

$.ajax({

type: "post",

dataType:'json', //接受数据格式

cache:false,

data:aoData,

url: sSource,

beforeSend: function(XMLHttpRequest){

//ShowLoading();

success: function(data, textStatus){

if(data.tableReturnObject.aaData==""){

alert("无相关数据,请刷新");

}

fnCallback(data.tableReturnObject);

complete: function(XMLHttpRequest, textStatus){

//HideLoading();

error: function(){

//请求出错处理

alert("error");

}

});

}

//“检索”按钮的处理函数

function search() {

if (oTable == null) { //仅第一次检索时初始化Datatable

oTable = $(tableId).dataTable( {

"bAutoWidth": false, //不自动计算列宽度

"aoColumns": aoColumns,

"bSort": false,

"bProcessing": true, //加载数据时显示正在加载信息

"bServerSide": true, //指定从服务器端获取数据

"bFilter": false, //不使用过滤功能

"bLengthChange": false, //用户不可改变每页显示数量

"iDisplayLength": iDisplayLength, //每页显示10条数据

"sAjaxSource": sAjaxSource,

"fnServerData": retrieveData, //获取数据的处理函数

"sPaginationType": "full_numbers", //翻页界面类型

"headerClickable":false,

"sortable":false

});

}

search();

function btnSelect(){

$(".paginate_active").click();

}

</script>

</html>

完善：

DataTableReturnObject 对象具体封装的是需要返回的数据，封装的具体属性如下

public class DataTableReturnObject {

private long iTotalRecords;
private long iTotalDisplayRecords;
private String sEcho;
private String[][] aaData;

public DataTableReturnObject(long totalRecords, long totalDisplayRecords,
   String echo, String[][] d) {
  this.iTotalRecords = totalRecords;
  this.iTotalDisplayRecords = totalDisplayRecords;
  this.sEcho = echo;
  this.aaData = d;
}

public long getiTotalRecords() {
return iTotalRecords;
}

public void setiTotalRecords(long iTotalRecords) {
this.iTotalRecords = iTotalRecords;
}

public long getiTotalDisplayRecords() {
return iTotalDisplayRecords;
}

public void setiTotalDisplayRecords(long iTotalDisplayRecords) {
this.iTotalDisplayRecords = iTotalDisplayRecords;
}

public String getsEcho() {
return sEcho;
}

public void setsEcho(String sEcho) {
this.sEcho = sEcho;
}

public String[][] getAaData() {
return aaData;
}

public void setAaData(String[][] aaData) {
this.aaData = aaData;
}

}

Jquery的dataTables分页：

实现的是页面分页，在后台查询每页现实的记录，直接在页面上显示当前页的信息，所以把分页方法封装成了PageUtil类，重复使用；页面要显示的数据以及页面显示数据的输出格式甚至是添加的onclick事件等都是在后台设置完成的，页面上只需要写空的<tbody>标签体自动载入后台传过来的将要显示的数据;

注：Jquery的dataTables分页有自动的分页标签和页面样式，只需要引入就ok需要注意的是table标签的id值还有<thead>和<tbody>标签，此案例是按页数查，显示到前台页面上的值是在后台action里查出来本页之后的list，action里查出来的是当前页要显示的那部分数据

ABCJIECBA

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

jQuery datatables使用 ( 封装类实现前台分页 二 续...)

jQuery datatables使用 ( 封装类实现前台分页二续...)