jquery.dataTable表格使用方法详解 |
您所在的位置：网站首页 › jquery自定义插件的方式有下面哪几种 › jquery.dataTable表格使用方法详解 |
|
最近做的项目，需要用一个表格来显示后台查出来的数据，能完成这个功能的table插件有很多，这里我用了DataTable插件。给大家介绍一下这个插件的简单使用; 一、前端的页面和js: (1)页面HTML代码： 分类Id 分类名称 创建时间 操作需要引入的js: 自定义的 DataTableUtils.js的代码： /** * 公共参数，主要存放自定义的搜索条件数据 */ var jsonCondition=null; /** * datatable基本设置 * @sourceUrl 数据源Url * @columns 列 */ function dataTableInit(sourceUrl,columns,columnDefs,pageLength){ $('.table-sort').DataTable({ // "dom": 'rt', //设置分页的位置 "bProcessing": true, // 件数选择下拉框内容 "lengthMenu": [10, 50, 75, 100,200], "iDisplayStart":0, // 每页的初期件数 用户可以操作lengthMenu上的值覆盖 "pageLength": pageLength?pageLength:50, //默认50 "paging": true,//开启表格分页 "bFilter": false,//去掉搜索框 "processing": false, // 是否显示取数据时的那个等待提示 "serverSide": true,//这个用来指明是通过服务端来取数据,如果不加 "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页 "ajaxSource": sourceUrl,//这个是请求的地址 "serverData": retrieveData, // 获取数据的处理函数 // 每次创建是否销毁以前的DataTable,默认false "destroy": true, // "autoWidth":true,//设置列宽自动 "columns": columns, "columnDefs": columnDefs }); } /** * form表单序列化方法 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; /** * 数据处理的方法 * @sSource datatable中设置的url * @aoData 要传递到后台的数据主要是分页的信息 * @fnCallback 回调函数 */ var page=new Object(); function retrieveData( sSource,aoData, fnCallback) { $.each(aoData,function(index,item){ if(item.name=="sEcho"){ page.sEcho=item.value; } if (item.name=="iDisplayStart") { page.iDisplayStart=item.value; } if (item.name=="iDisplayLength") { page.iDisplayLength=item.value; } }); if (jsonCondition) { //将搜索条件和page拼接到一起 $.extend(page,jsonCondition); } $.ajax({ url : sSource,//这个就是请求地址对应sAjaxSource data : JSON.stringify(page),//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 type : 'post', dataType : 'json', contentType:"application/json", //async : false, success : function(result) { //后台执行成功的回调函数 fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error : function(msg) { } }); } 使用dataTable页面需要添加的js: //列表页js jQuery(function($) { //列值定义,clientIP和count都是对应的返回对象的字段 colModel = [ //{"data": "","bSortable": false}, {"data": "clientIP","bSortable": false}, {"data": "count","bSortable": false}, ]; $(dataTableInit(projectPath+"/analyse/getGoodsListData", colModel,'',10)); });如果要是有搜索条件的话，你需要在页面中添加搜索的form表单和在对应的js中添加搜索按钮的方法： （1）form表单： 商品分类： --请选择-- 商品名称： 商品ID： 搜索
（2）js中添加的搜索方法： /** * 搜索按钮的方法 */ function search(){ jsonCondition=$("#form").serializeObject(); var table = $('.table-sort').DataTable(); table.ajax.reload(); }到这里前端的需要做的工作已经完成，下边就是后台接受数据和返回数据了： 二、后台工作： （1）首先有一个PageVo对象存放前台传递过来的分页信息 PaveVo对象： public class PageVo { private Integer sEcho; //第几次请求的标志，虽然没什么用，但是最好有 private int iColumns; private int iDisplayStart; private int iDisplayLength; public int getCurrentPageNum() { return iDisplayStart/iDisplayLength+1; } public void setCurrentPageNum(int currentPageNum) { } public Integer getsEcho() { return sEcho; } public void setsEcho(Integer sEcho) { this.sEcho = sEcho; } public int getiColumns() { return iColumns; } public void setiColumns(int iColumns) { this.iColumns = iColumns; } public int getiDisplayStart() { return iDisplayStart; } public void setiDisplayStart(int iDisplayStart) { this.iDisplayStart = iDisplayStart; } public int getiDisplayLength() { return iDisplayLength; } public void setiDisplayLength(int iDisplayLength) { this.iDisplayLength = iDisplayLength; } }（2）上面的pageVo对象，发现dataTable 传递的分页信息不是标准的分页表示。所以要建立一个标志的Page对象，可以存放返回的对象集合。 标准的Page对象： /** * 分页类 * @version 1.0 * @create 2017/6/29 18:32 **/ public class Page implements Serializable { private static final long serialVersionUID = -1544496752150212548L; /** * 当前页 */ private int pageNo = 1; /** * 页面条数 */ private int pageSize = 10; /** * 总数 */ private long count; /** * 第一页 */ private int first; /** * 最后一页 */ private int last; /** * 前一页 */ @SuppressWarnings("unused") private int prev; /** * 后一页 */ @SuppressWarnings("unused") private int next; /** * 是否第一页 */ private boolean firstPage; /** * 是否最后一条 */ private boolean lastPage; private List list = new ArrayList(); public Page() { this.pageSize = -1; } public Page(int pageNo, int pageSize) { this(pageNo, pageSize, 0); } public Page(int pageNo, int pageSize, long count) { this(pageNo, pageSize, count, new ArrayList()); } public Page(int pageNo, int pageSize, long count, List list) { this.setCount(count); this.setPageNo(pageNo); this.setPageSize(pageSize); this.list = list; } public void initialize() { this.first = 1; this.last = (int) (count / (this.pageSize < 1 ? 20 : this.pageSize) + first - 1); if (this.count % this.pageSize != 0 || this.last == 0) { this.last++; } if (this.last < this.first) { this.last = this.first; } if (this.pageNo = this.last) { this.pageNo = this.last; this.lastPage = true; } if (this.pageNo < this.last - 1) { this.next = this.pageNo + 1; } else { this.next = this.last; } if (this.pageNo > 1) { this.prev = this.pageNo - 1; } else { this.prev = this.first; } // 2 if (this.pageNo < this.first) { this.pageNo = this.first; } if (this.pageNo > this.last) { this.pageNo = this.last; } } public long getCount() { return count; } public void setCount(long count) { this.count = count; if (pageSize >= count) { pageNo = 1; } } public int getPageNo() { return pageNo; } public void setPageNo(int pageNo) { this.pageNo = pageNo; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |