jquery datatable 表头悬浮 jquery datatable 分页

转载

lgmyxbjfu 2023-08-11 11:14:05

文章标签 jquery 分页前端 java datatables 文章分类 jQuery 前端开发

这两天搞了点网页上的分页，真的是搞得欲仙欲死，现在也只能说是搞了个入门的水平吧，现在就来写下这几天的收获。

用的是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;
	}

其他的我就不写了，分页的在前面都有写，这个项目，过段时间我会上传资源。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。