您的位置：首页 > Web前端 > JQuery

用jquery datatables实现页面分页,前端分页,后端分页

2016-11-25 19:50 495 查看
     这两天搞了点网页上的分页，真的是搞得欲仙欲死，现在也只能说是搞了个入门的水平吧，现在就来写下这几天的收获。

     用的是datatables的框架，先来个框架的地址：https://datatables.net/,本人理解也不是很深，直接结合代码来解释下。

现在还没有写完，所以不能上传资源，现在只能说关键部分。

首先一个xml文件：

<head>
<meta charset="UTF-8">
<title>jquery DataTables插件自定义分页ajax实现</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<link href="../static/css/dataTables.bootstrap.min.css" rel="stylesheet"
media="screen">
<link href="../static/css/jquery.dataTables.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<div class="row-fluid">
<h3>JQuery DataTables插件自定义分页Ajax实现</h3>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>ID</th>
<th>创建时间</th>
<th>别名</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>创建时间</th>
<th>别名</th>
</tr>
</tfoot>
</table>
</div>

<script type="text/javascript">
var lang = {
"sProcessing" : "处理中...",
"sLengthMenu" : "每页 _MENU_ 项",
"sZeroRecords" : "没有匹配结果",
"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中数据为空",
"sLoadingRecords" : "载入中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上页",
"sNext" : "下页",
"sLast" : "末页",
"sJump" : "跳转"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
};

//初始化表格
//     $.get('/MiniWms/company/page', function(data) {
//       var table = $("#example").DataTable({
//         data : data,
//         "columns" : [ {
//           "data" : "id"
//         }, {
//           "data" : "created"
//         }, {
//           "data" : "anothername"
//         } ]
//       });
//     })

$('#example').DataTable({
//       "ajax" : {

//       	url:"/MiniWms/company/all",
//     	dataSrc:function(data){return data}
//       },
"processing": true,
"serverSide": true,
"ajax": '/MiniWms/company/page',
"columns" : [ {//data的字段与你后端传递过来的要对应
"data" : "id"
}, {
"data" : "created"
}, {
"data" : "anothername"
} ],
//       "columnDefs": [
//         {
//             "targets": [3],
//             "data": "anothername",
//             "render": function(data, type, full) {
//                 return "<a href='/MiniWms/company/page?=" + data + "'>Update</a>";
//             }
//         }
//     ]
});
</script>
</body>


由于我是本地的js与css，所以给你们链接，链接不是新的，所以可以去下载最新的https://datatables.net/download/index
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">

<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>


然后可以去用相应的js与css。上面就是前端的分页。但是需要注意的是前段接受的数据类型是

{draw: null, recordsTotal: , recordsFiltered: ,data[]}

是这种类型的，所以后端传递数据的时候要封装一下。下面是封装的类：

Pagination.java:

package ndm.miniwms.vo;

import java.util.List;

public class Pagination<T> {
private Integer draw;
private Integer recordsTotal;
private Integer recordsFiltered;
private List<T> data;
public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(Integer recordsTotal) {
this.recordsTotal = recordsTotal;
}
public Integer getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(Integer recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}

}

上面就是封装的类型的类，需要注意的是list中的泛型就是你要传递的类的对象。

后端分页：

后端分页就是说前段要把分页的起始位置传递过去，也就是start，这个是框架中封装好的，所以我们需要知道前段传递的参数都是什么。

draw:1
columns[0][data]:id
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:created
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:anothername
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:0
length:10
search[value]:
search[regex]:false


上面就是前段传递过去的参数，我们在后端要接收一下这个数据，里面关键的我们需要start，起始位置，以及length，这个是页面的个数，所以我们要在后端封装一个类来接受这些参数。当然还有draw，是刷新的次数，这个我们不用管。

TableModelVO.java:

package ndm.miniwms.vo;

public class TableModelVO {
private Integer draw;
private Integer start;
private Integer length;
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;
}
}


接受到参数接下来就是怎么用了。
@RequestMapping(value="/company/page",method = RequestMethod.GET)
@ResponseBody
public Pagination<CompanyDetails> selectTab(TableModelVO tableModelVO1){
int a = tableModelVO1.getStart()/tableModelVO1.getLength()+1;
System.out.println(a);
Pagination<CompanyDetails> pagination = new Pagination<>();

TableModelVO tableModelVO = new TableModelVO();
tableModelVO.setStart(a);
tableModelVO.setLength(tableModelVO1.getLength());
pagination.setData(companyService.selectTab(tableModelVO));
pagination.setDraw(tableModelVO.getDraw());
//		pagination.setRecordsTotal(companyService.selectTab(tableModelVO).size());
pagination.setRecordsFiltered(companyService.all().size());
pagination.setRecordsTotal(companyService.all().size());

//		return new ResponseEntity<Pagination>(new Pagination(), HttpStatus.OK);
return pagination;
}


其他的我就不写了，分页的在前面都有写，这个项目，过段时间我会上传资源。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 分页 前端 java datatables
相关文章推荐
新的分享
章节导航