`
backhomedog
  • 浏览: 4967 次
社区版块
存档分类
最新评论

DATATABLE分页

 
阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.css">

<style type="text/css" class="init">

</style>

<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.js"></script>

<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"pageLength": 10,
//"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
"deferRender": true,
"oLanguage" : {
"sEmptyTable": "没有记录",
"sProcessing" : "处理中，请稍候...",
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "没有记录",
"sInfo" : "当前显示从 _START_ 到  _END_ 条记录,总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(从全部记录数 _MAX_ 条中过滤)",
"sInfoPostFix" : "",
"sLoadingRecords": "正在加载中,请稍候...",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
},
"ajax": "${ctx}/dataTables/datatables.do",
"columns": [
      {'data': 'firstName'},
      {'data': 'lastName'},
      {'data': 'position'},
      {'data': 'office','bSortable': false},
      {'data': 'startDate'},
      {'data': 'age'},
      {'data': 'salary'}
    ],
    "columnDefs": [//自定义d第7列返回值
      {
      'targets': [7],
      'data' : 'id',
              'render': function(data, type, row, meta) {
              var result="<a href=\'javascript:update(\""+data+"\")\' title=\'修改\'>修改</a>&nbsp;&nbsp;";  
                  result+="<a href=\'javascript:del(\""+data+"\")\' title=\'删除\'>删除</a> &nbsp;&nbsp;";
                  result+="<a href=\'javascript:show(\""+data+"\")\'  title=\'查看\'>查看</a>";     
              return result;
              }
      }
    ]
} );
} );

function update(id) {
alert(id);
}

function del(id) {
alert(id);
}

function show(id) {
alert(id);
}

</script>
</head>
<body>
<div class="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</thead>

<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
------------------------
private DatatablesResponse(DataSet<T> dataSet, PageCriterias pcs) {
this.data = dataSet.getRows();
this.recordsTotal = dataSet.getTotalRecords();
this.recordsFiltered = dataSet.getTotalDisplayRecords();
this.draw = pcs.getDraw();
}
-----------------------------------------
public class PageCriterias implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 请求次数
*/
private Integer draw;
/**
* 分页开始记录
*/
private Integer start;
/**
* 分页大小
*/
private Integer length;
/**
* 查询框输入的值
*/
private String searchValue;
/**
* 查询正则表达式
*/
private String searchRegex;
/**
* 排序规则ASC DESC
*/
private String orderValue;
/**
* 排序字段值
*/
private String orderField;
/**
* 排序字段列
*/
private String orderColumn;

public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getStart() {
return start;
}
public void setStart(Integer start) {
this.start = start;
}
public Integer getLength() {
return length;
}
public void setLength(Integer length) {
this.length = length;
}
public String getSearchValue() {
return searchValue;
}
public void setSearchValue(String searchValue) {
this.searchValue = searchValue;
}
public String getSearchRegex() {
return searchRegex;
}
public void setSearchRegex(String searchRegex) {
this.searchRegex = searchRegex;
}
public String getOrderValue() {
return orderValue;
}
public void setOrderValue(String orderValue) {
this.orderValue = orderValue;
}
public String getOrderField() {
return orderField;
}
public void setOrderField(String orderField) {
this.orderField = orderField;
}
public String getOrderColumn() {
return orderColumn;
}
public void setOrderColumn(String orderColumn) {
this.orderColumn = orderColumn;
}
}
----------------------------------------------
@Override
public DataSet<DatatablesBean> findDatatablesWithPageCriterias(PageCriterias pcs) {
List<DatatablesBean> rows = datatablesMapper.findPaginated(getParams(pcs));
long count = datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean> dataSet = new DataSet<DatatablesBean>(rows, count, count);
return dataSet;
}
private Map<String,Object> getParams(PageCriterias pcs){
Map<String, Object> params = new HashMap<String, Object>();
if(null != pcs) {
params.put("offset", pcs.getStart());
params.put("pagesize", pcs.getLength());
params.put("search", pcs.getSearchValue());  //查询输入框的值

//String column = pcs.getOrderColumn();
String order = pcs.getOrderValue();
String field = pcs.getOrderField();
if("0".equals(field)) {
params.put("sortName", " first_name "+order); //排序字段值
}else if("1".equals(field)) {
params.put("sortName", " last_name "+order);
}else if("2".equals(field)) {
params.put("sortName", " position "+order);
}else if("3".equals(field)) {
params.put("sortName", " office "+order);
}else if("4".equals(field)) {
params.put("sortName", " start_date "+order);
}else if("5".equals(field)) {
params.put("sortName", " age "+order);
}else if("6".equals(field)) {
params.put("sortName", " salary "+order);
}else {
params.put("sortName", " id "+order);
}
}
return params;
}
---------------------------------------------
ctrol
@RequestMapping("/datatables.do")
@ResponseBody
public DatatablesResponse<DatatablesBean> list(PageCriterias pcs) {
//LOG.info(JSON.toJSONString(pcs));
DataSet<DatatablesBean> dataSet = datatablesService.findDatatablesWithPageCriterias(pcs);
DatatablesResponse<DatatablesBean> resp = DatatablesResponse.build(dataSet, pcs);
LOG.info(JSON.toJSONString(resp));
return resp;
}
----------------
@Override
public DataSet<DatatablesBean> findDatatablesWithPageCriterias(PageCriterias pcs) {
List<DatatablesBean> rows = datatablesMapper.findPaginated(getParams(pcs));
long count = datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean> dataSet = new DataSet<DatatablesBean>(rows, count, count);
return dataSet;
}
-----------------------
private DatatablesResponse(DataSet<T> dataSet, PageCriterias pcs) {
this.data = dataSet.getRows();
this.recordsTotal = dataSet.getTotalRecords();
this.recordsFiltered = dataSet.getTotalDisplayRecords();
this.draw = pcs.getDraw();
}
----------------------
public final class DataSet<T> {
private List<T> rows;
private final Long totalDisplayRecords;
private final Long totalRecords;

public DataSet(List<T> rows, Long totalRecords, Long totalDisplayRecords) {
this.rows = rows;
this.totalRecords = totalRecords;
this.totalDisplayRecords = totalDisplayRecords;
}

--------------------
public class DatatablesBean {
    private Integer id;

    private String firstName;

    private String lastName;

    private String position;

    private String email;

    private String office;

    private Date startDate;

    private Integer age;

    private Integer salary;

    private String extn;

----------------------
<!-- 分页查询列表 -->
  <select id="findPaginated" parameterType="map" resultMap="BaseResultMap">
  select
  <include refid="Base_Column_List" />
  from datatables_demo t
  where 1 = 1
  <if test="search != null and search != ''">
  AND t.first_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or   
t.last_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.position LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.email LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.office LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.age LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.salary LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%')
  </if>
  <!-- 排序 -->
<if test="sortName != null and sortName != ''">
ORDER BY ${sortName}
</if>
  limit #{offset},#{pagesize}
  </select>
 
  <!-- 查询总记录数 -->
  <select id="findPaginatedCount" parameterType="map" resultType="long">
  select count(*) from datatables_demo t
  where 1=1
  <if test="search != null and search != ''">
  AND t.first_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or   
t.last_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.position LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.email LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.office LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.age LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.salary LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%')
  </if>
  </select>
分享到：
请求3333
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    对DataTable分页获取数据

    ### 对DataTable进行分页获取数据的方法解析 在处理大量数据时，为了提高用户体验及系统性能，通常会采用分页技术来展示数据。本篇文章将详细解释如何针对`DataTable`对象实现分页功能，并通过示例代码来具体说明其...

    对DataTable进行分页

    对DataTable进行分页，对DataTable进行分页

    datatable分页

    在提供的压缩包文件“DataTable分页”中，很可能是包含了`Datatable`分页功能的示例代码、配置文件或者相关教程。通过深入研究这些文件，你可以更好地理解和应用`Datatable`的分页功能，创建出更加符合用户需求的...

    DataTable分页

    `DataTable分页`就是这样一个功能，它允许用户只加载和显示当前所需的数据页面，而不是一次性加载所有数据。 在DataTable中实现分页，主要有两种方式：服务器端分页和客户端分页。 1. 服务器端分页： 在服务器端...

    dataTable分页插件

    "dataTable分页插件"就是针对这种情况设计的一个高效、易用的解决方案。它允许开发者在短短五行代码内实现分页功能，大大降低了代码量，提升了开发效率。 DataTable是一款强大的JavaScript库，用于处理和展示动态...

    Jquery dataTable完整例子（取数据、分页、样式等）

    标题“Jquery dataTable完整例子（取数据、分页、样式等）”和描述表明，我们将讨论如何利用这个插件实现数据的获取、分页、排序和搜索功能，并且将看到一个具体的实例，帮助理解如何与JSON数据进行交互。...

    JSF2datatable分页控件与左侧菜单

    而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能很强大，控件很多，但有一点不好就是不支持IE6，特别是下拉列表，p:dialog等，其它的分页p:datatable实际使用...

    datatable分页标签page

    运用page.jar库里的分页标签可以很快的实现分页，不用考虑具体实现

    angular2-datatable, 带有排序和分页的Angular2简单表组件.zip

    angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件，具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts

    C# Winform Datagridview 分页和打印功能.pdf

    C# Winform DataGridView控件的分页和打印功能实现，涉及到.NET框架下的Windows窗体应用程序开发。DataGridView控件是一个功能强大的表格数据展示组件，它可以用来显示数据，如数据库查询结果等。分页功能是指将大量...

    .netDataTable分页显示

    通过对以上内容的学习，我们不仅了解了.NET环境下DataTable分页显示的基本原理，还掌握了一个实用的分页方法。这对于开发高效、用户友好的Web应用程序具有重要意义。在未来的工作中，我们还可以结合更多的前端技术和...

    C# DataTable分页处理实例代码

    在C#中，可以使用以下方法来实现DataTable的分页功能。首先，我们需要一个函数，该函数接受原始的DataTable、当前页面索引（PageIndex）和每页显示的记录数（PageSize）作为参数。以下是一个具体的分页处理实例代码...

    .net简单的分页控件源码

    首先，此分页控件有两种分页模式：存储过程分页和DataTable分页。存储过程分页是通过在数据库端执行特定的存储过程来实现的，这种方法通常效率较高，因为大部分数据处理工作都在数据库服务器上完成，减少了网络传输...

    两个winform datagridview 分页的实例，外国人写的，简单易懂

    8. DataTable分页： 由于数据通常存储在DataTable中，我们需要在内存中实现分页，这意味着我们只加载当前页所需的数据，而不是整个数据集。 9. 性能优化： 为了进一步优化，可以考虑异步加载数据，或者使用虚拟化...

    简单的分页控件源码下载

    而DataTable分页则更适合轻量级的应用，或者当数据已经在客户端时。 分页控件的另一个关键特性是用户可以选择是否开启分页以及每页显示的记录数。这种灵活性让用户可以根据自己的需求调整查看数据的方式。例如，...

    json获取datatable后生成table分页显示

    本篇将详细讲解如何使用jQuery通过JSON获取DataTable数据，将其转化为HTML表格，并实现分页显示。 首先，我们需要了解JSON。JSON是一种基于文本的格式，其数据结构主要包含对象（键值对）和数组。在JavaScript中，...

    jquery datatable服务端分页

    jQuery DataTable服务端分页是一种在服务器端处理分页数据的技术，而不是在客户端处理。这种方式可以减少客户端处理数据的压力，特别是在数据量较大时。服务端分页可以利用服务器强大的处理能力来完成分页操作，然后...

    jquery datatable serverside page 服务器端分页

    在服务器端分页中，前端的DataTable并不负责加载所有数据，而是每次向服务器发送请求，获取指定页码的数据。服务器根据请求参数（如页码、每页记录数）处理数据，只返回当前页所需内容，从而减少网络传输量和前端...

    json获取datatable后生成table分页显示checkbox全选

    "json获取datatable后生成table分页显示checkbox全选"这个主题涵盖了几个重要的JavaScript和前端开发技术，这些技术有助于提升用户体验并优化服务器资源。以下是这些知识点的详细说明： 1. **JSON (JavaScript ...

Magicbox
Global site tag (gtag.js) - Google Analytics