DataTable 分页功能的实现示例"

在使用DataTable前台分页时，需要后台返回全部数据并返回列表。如果是后台分页，则后台需要获取分页参数，页面中要加上`"searchable":true, "bServerSide": true`这两个属性。不需要设置`dataSrc: ""`这个属性。

返回的分页对象为`DataTablePageDto`,需要将查询到的list结果设置到分页对象中。

页面代码如下：

```html

```

以下是重构后的代码：

```javascript

currentDt = $table.DataTable({

retrieve: true,

aoColumnDefs: [

{ "bSortable": false, "aTargets": [0] },

{ "bSortable": false, "aTargets": [1] }

], //指定某列不排序

ajax: {

url: baseUrl + "list",

data: { orgid: v },

dataSrc: "" //前台分页要加该属性

},

fnHeaderCallback: function() {

$(

'#sp'

).html(

""

);

},

fnDrawCallback: function() {

this.api().column(1).nodes().each(function(cell, i) {

cell.innerHTML = i + 1;

});

},

columns: [

{

title: '',

data: "alink",

},

{

title: '序号',

data: null,

targets: 0,

},

{

title: '姓名',

data: "name",

},

{

title: '性别',

data: "sex",

},

], //columns定义结束。此处省略了其他列的定义。如果有更多列需要添加，可以在这里继续添加。例如，如果还需要添加“年龄”和“地址”两列，可以这样添加：{title:“年龄”，data:“age”，targets:3},{title:“地址”，data:“address”，targets:4}。注意，这里的targets值代表的是该列在表格中的索引位置，从0开始计数。所以，索引为3的列对应的是第四列，索引为4的列对应的是第五列。

重构后的代码如下：

```javascript

{

"render": function(data, type, row, meta) {

if (data === '1') {

data = '男';

} else if (data === '2') {

data = '女';

} else {

data = '';

}

return data;

}

}

```

title: "现任职务",

data: "xrPresent"

},

{

title: "籍贯",

data: "origin"

},

{

title: "入党时间",

data: "rdTime"

},

{

title: "操作",

data: "id",

createdCell: function(td, tdData) {

var operator = [];

/** 查看不能用框架样式，请调整。。。。。。***/

/** 选调生签到信息列表 */

var qdBtn = G.viewSigin(tdData, tz);

operator.push(qdBtn);

/** 选调生信息列表 */

var tz = "1"; //选调生信息列表

var xqBtn = G.viewBtn(tdData, tz);

operator.push(xqBtn);

/** 查看不能用框架样式，请调整。。。。。。***/

/** 签发预录用人员名单 */

var checkBtn = G.createCheckBtn(tdData);

operator.push(checkBtn);

/** 更新选调生信息 */

var suoBtn = G.createSuo1Btn(tdData);

operator.push(suoBtn);

/** 删除选调生信息 */

var delBtn = G.createSuo2Btn(tdData);

operator.push(delBtn);

/** 查看选调生信息 */

var view = G.createViewBtn(tdData);

operator.push(view);

/** 查看不能用框架样式，请调整。。。。。。***/

$(td).html(operator);

}

在Java后台中，我们可以使用以下方法实现分页功能和搜索参数处理：

```java

import com.example.demo.entity.DataTablePageDto;

import com.example.demo.model.SearchResult;

import com.example.demo.service.DataService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

@Controller

public class DataController {

@Autowired

private DataService dataService;

/**

* 获取数据列表并分页处理

* @param searchValue 搜索参数

* @param pageNum 当前页码，从1开始

* @param pageSize 每页显示的数据条数

* @return DataTablePageDto 分页对象，包含数据列表、总记录数等信息

*/

@RequestMapping(value = "/dataList", method = RequestMethod.GET)

public String getDataList(String searchValue, int pageNum, int pageSize, ModelMap modelMap) {

// 根据搜索参数查询数据列表

SearchResult searchResult = dataService.searchData(searchValue);

// 将数据列表、总记录数等信息封装到分页对象中，并添加到ModelMap中返回前端页面

DataTablePageDto dataTablePageDto = new DataTablePageDto();

dataTablePageDto.setDataList(searchResult.getList());

dataTablePageDto.setTotalCount(searchResult.getTotalCount());

dataTablePageDto.setPageNum(pageNum);

dataTablePageDto.setPageSize(pageSize);

modelMap.put("dataTablePageDto", dataTablePageDto);

return "data-list"; // 返回前端页面路径

}

}

```

在这个示例中，我们首先创建了一个名为`DataController`的控制器类，并通过`@Autowired`注解自动注入了`DataService`。然后定义了一个名为`getDataList`的方法，该方法接收搜索参数、当前页码和每页显示的数据条数作为输入参数，并返回一个封装了数据列表、总记录数等信息的`DataTablePageDto`分页对象。最后，将分页对象添加到`ModelMap`中，并返回前端页面路径。

RequestMapping("/list")@ResponseBody

public DataTablePageDto addCadre(Integer orgid, String ids, DataTablePageDto tablePage, HttpServletRequest request) throws UnsupportedEncodingException {

String searchValue = request.getParameter("search[value]");

//搜索参数

searchValue = new String(searchValue.getBytes("iso8859-1"), "UTF-8");

//解决中文乱码

DataTablePageDto dataTablePageDto = new DataTablePageDto<>(); //分页对象

dataTablePageDto.setStart(tablePage.getStart());

//设置起始查询页

dataTablePageDto.setLength(tablePage.getLength());

//设置查询条数

dataTablePageDto.setDraw(tablePage.getDraw());

//绘制次数

StringBuffer hql = new StringBuffer("FROM TorgCadre WHERE status=? and name like ?");

List list = new ArrayList<>();

if (orgid != null && orgid > 0) {

hql.append(" and orgid in (");

hql.append(getAllOrgidsTwo(orgid));

hql.append(")");

} else if (ids != null && !ids.trim().equals("")) {

hql.append(" and id in (");

hql.append(ids);

hql.append(")");

} else if (SK.ADMIN_USERNAME.equals(getLoginUserinfo().getUsername())) {

hql.append(levelOrder());

} else {

hql.append(" and 1=-1");

dataTablePageDto.setRecordsTotal(0L);

dataTablePageDto.setRecordsFiltered(0L);

}

String hqlCount = hql.toString().replace("FROM", "select count(1) from");

Long total = cadreService.selectQueryCount(hqlCount, "1", searchValue); //总记录数

dataTablePageDto.setRecordsTotal(total);

dataTablePageDto.setRecordsFiltered(total);

list = cadreService.selectForList(hql.toString(), dataTablePageDto, "1", searchValue);

for (TorgCadre t : list) {

t.setTorgCadreFamilies(null);

t.setTorgCadreResumes(null);

t.setCheck(null);

t.setAlink("");

}

User obj = (User) getSession().getAttribute(SK.USER_INFO);

log.info("查看列表成功");

dataTablePageDto.setData(list);

return dataTablePageDto; //返回分页对象

}

分页对象实体类重构如下：

```java

// 该后台分页是采用hibernate分页查询

public class DataTablePageDto {

private List data; // 包含的数据

private Integer draw = 1; // 绘制次数

private Long recordsTotal; // 总长度

private Long recordsFiltered; // 过滤后的长度

private Integer start = 0; // 第几条数据开始查询

private Integer length = 10; // 每页显示几条

public DataTablePageDto() {

}

// Getter and Setter 方法省略...

}

```

附其他分页实体：

```java

public class DataTableOrderDto {

private String column; // 需要排序的列名

private String order; // 排序方式，asc或desc

public DataTableOrderDto() {

}

public DataTableOrderDto(String column, String order) {

this.column = column;

this.order = order;

}

public String getColumn() {

return column;

}

public void setColumn(String column) {

this.column = column;

}

public String getOrder() {

return order;

}

public void setOrder(String order) {

this.order = order;

}

}

```

```java

package com.diamond.core.feature.orm.hibernate;

import java.util.ArrayList;

import java.util.List;

/**

* Mybatis分页参数及查询结果封装. 注意所有序号从1开始.

*

* @param Page中记录的类型.

* @author StarZou

* @since 2014年5月18日 下午1:34:32

*/

public class Page {

// --分页参数--//

/**

* 页编号 : 第几页

*/

protected int pageNo = 1;

/**

* 页大小 : 每页的数量

*/

protected int pageSize = 15;

/**

* 偏移量 : 第一条数据在表中的位置

*/

protected int offset;

/**

* 限定数 : 每页的数量

*/

protected int limit;

// --结果--//

/**

* 查询结果

*/

protected List result = new ArrayList();

/**

* 总条数

*/

protected int totalCount;

/**

* 总页数

*/

protected int totalPages;

// --计算数据库查询的参数： LIMIT 3, 3; LIMIT offset, limit;--//

/**

* 计算偏移量

*/

private void calcOffset() {

this.offset = ((pageNo - 1) * pageSize);

}

/**

* 计算限定数

*/

private void calcLimit() {

this.limit = pageSize;

}

// --构造函数--//

public Page() {

this.calcOffset();

this.calcLimit();

}

public Page(int pageNo, int pageSize) {

this.pageNo = pageNo;

this.pageSize = pageSize;

this.calcOffset();

this.calcLimit();

}

public Page(int start, int pageSize, String keyword){

this.offset=start;

this.pageSize = pageSize;

}

// --访问查询参数函数--//

/** *获得当前页的页号，序号从1开始，默认为1.*/

public int getPageNo() { return pageNo;} }} "+" +" "+ "totalCount"+ "=" + totalCount+ " "+ "pageNo"+ "=" + pageNo+ " "+ "pageSize"+ "=" + pageSize+ " "+ "offset"+ "=" + offset+ " "+ "limit"+ "=" + limit+ " "+ "result"+ "=" + result+"}" "; } } } } } }" + "totalPages" + "=" + totalPages + " " + "pageNo" + "=" + pageNo + " " + "pageSize" + "=" + pageSize + " " + "offset" + "=" + offset + " " + "limit" + "=" + limit + " " + "result" + "=" + result + "
" + "

---

" + "首页" + "上一页" + "下一页" + "尾页" + "

"; responseWriter.write(html); } catch (Exception e) {}