`

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

 
阅读更多
封装的公用分页的工具类:
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 + "' onclick='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>

    <title>机构设置</title>
   
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
    <%@ include file="../taglibs.jsp" %>
    <script type="text/javascript" src="${ctx}/js/common/selectFun.js"></script>
   
<!—需要引入的固定样式和js文件-->
<link rel="stylesheet" type="text/css"href="${ctx}/css/common/dialog.css">
<link href="${ctx}/css/common/style1.css" style="text/css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/css/dataTables/demo_page.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/css/dataTables/demo_table.css" type="text/css" />
<script type="text/javascript" language="javascript" src="${ctx}/js/dataTables/jquery.dataTables.js"></script>

</head> 
<body>
<!-- 显示区域 -->
<fieldset>
<legend>机构管理</legend>
<form class="feildset clearfix dataForm ">
<table class="gridtable" style="width:100%" id="organizationTable">
<thead>     <tr>
<th width="10%" align="center">
<input type="checkbox" />
</th>
<th width="30%" align="center">机构名称</th>
<th width="30%" align="center">电话号码</th>
<th width="30%" align="center"> 传真 </th>
</tr>
</thead>
<tbody align="center">
 
<!—自动接收后台数据,按规定格式显示-->

</tbody>

</table>
</form>
</fieldset>
</body>
<script type="text/javascript">
var sAjaxSource="findAllSite.action";
var aoColumns=[ //设定各列宽度
{"sWidth": "10%"},
{"sWidth": "30%"},
{"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里查出来的是当前页要显示的那部分数据

分享到:
评论

相关推荐

    开发工具 jquery.dataTables.min

    开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....

    JQuery DataTables示例,包含分页、拖拽、导出

    **jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库,用于增强HTML表格。它提供了各种高级特性,如分页、排序、过滤、搜索、数据加载以及更多,大大提升了用户体验。在这...

    jquery datatables 所需文件 官方下载的

    2. **CSS 文件**: DataTables 提供了预设的样式文件(如 `dataTables.bootstrap.css` 或 `dataTables.foundation.css`),这些文件用于美化表格的显示效果,使其适应不同的前端框架(如Bootstrap、Foundation等)。...

    DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)

    通过学习和使用`Mvc.JQuery.Datatables`,开发者不仅可以快速地在.NET MVC应用中实现复杂的数据表格功能,还能借此机会深入理解前端和后端交互的工作原理,提升Web开发技能。在实际开发中,可以根据项目需求自定义...

    jquery.dataTables.min.js

    jquery.dataTables.min.js是使用Datatable插件时用的脚本文件

    Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能

    通过以上知识点的讲解,我们可以看到Spring Boot、MybatisPlus和JQuery DataTables的结合使用,可以高效地实现数据展示、分页和模糊查询功能,是现代企业级Web应用中的常见实践。在实际开发中,还需要根据具体需求...

    jquery.dataTables包.rar

    这些文件通常包括`jquery.dataTables.min.js` 和 `dataTables.bootstrap.min.css` 等,它们提供了基本的功能和视觉样式。在HTML表格后,通过调用`.DataTable()` 方法来初始化插件,例如:`$('table').DataTable();`...

    使用jquery实现表格动态分页

    本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...

    datatables+springmvc+bootstrap实现分页

    datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序 几乎支持任何数据源:DOM, ...

    仿jquery.dataTables的分页(查询+排序)

    仿jquery.dataTables的分页(查询+排序),jquery插件式开发简单示例。

    jQuery实现简单的前台表格分页插件paginathing.js.zip

    本文将深入探讨使用jQuery实现简单前台表格分页的插件——`paginathing.js`。 首先,我们需要了解`jQuery`库。jQuery是由John Resig于2006年创建的,它的目标是使JavaScript编程变得简单、快捷。它通过提供简洁的...

    strut2.0 + hibernate3.0 + jquery.datatables+mysql 5.0实现的 hibernate分页

    1,这个项目是strut2.0 + hibernate3.0 + jquery.datatables+mysql 5.0实现的 hibernate分页(无排序,搜索,仅仅分页显示),服务器端分页在datatables上展现,有关 datatables的知识请关注它的官网...

    jquery dataTables及相关css

    在提供的文件中,`jquery.dataTables.js`和`jquery.dataTables-1.7.5.js`是两个主要的JavaScript库,分别代表了DataTables的不同版本。这两个版本可能有不同的功能特性和API,开发者应根据项目需求选择合适的版本。...

    jquery 分页插件 dataTables

    &lt;script type="text/javascript" src="jquery.dataTables.js"&gt; &lt;th&gt;Name &lt;th&gt;Position &lt;th&gt;Office &lt;th&gt;Age &lt;th&gt;Start date &lt;th&gt;Salary &lt;!-- 表格数据 --&gt; $(document).ready(function...

    java初学者教程,前端jquery.datatables.js分页

    对于Java初学者来说,这是一个很好的实践项目,可以帮助他们理解如何结合使用SpringBoot、MyBatis、JSP、jQuery和DataTables.js来实现一个功能完备的前端分页搜索系统。通过学习和实践这个教程,开发者可以提升自己...

    jquery dataTables组件

    1. **样式兼容**:DataTables提供了Bootstrap主题,只需在CSS引用中加入对应的Bootstrap CSS,如`dataTables.bootstrap.min.css`,确保表格样式与Bootstrap保持一致。 2. **按钮扩展**:DataTables有内置的按钮插件...

    jQuery datatables插件

    1. **引入资源**:在HTML文件中引入jQuery库(如jquery-1.6.4.min.js)和DataTables脚本文件(通常为`jquery.dataTables.min.js`)以及对应的CSS文件。 2. **初始化表格**:通过JavaScript选择需要转换的表格元素,...

    jQuery Datatables.zip

    **二、使用步骤** 1. **引入依赖**:在HTML文件中引入jQuery库和DataTables的CSS和JS文件。 2. **初始化表格**:通过`$(document).ready()`函数选择表格元素,并调用`DataTable()`方法进行初始化。 3. **配置选项**...

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

Global site tag (gtag.js) - Google Analytics