jquery.dataTable表格使用方法详解

      最近做的项目，需要用一个表格来显示后台查出来的数据，能完成这个功能的table插件有很多，这里我用了DataTable插件。给大家介绍一下这个插件的简单使用;

     一、前端的页面和js:

    (1)页面HTML代码：

<table class="table table-border table-bordered table-bg table-hover table-sort">
	<thead>
		<tr class="text-c">
			<!-- <th width="40"><input name="" type="checkbox" value=""></th>  多选框 -->
			<th width="40">分类Id</th>
			<th width="80">分类名称</th>
			<th width="100">创建时间</th>
			<th width="80">操作</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
 </table>

 需要引入的js:

<script type="text/javascript" src="${ctx}/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<!-- 自定义js 源码在后边已贴出 -->
<script type="text/javascript" src="${ctx}/static/view/common/DataTableUtils.js"></script>

 自定义的

DataTableUtils.js的代码：

 

/**
 * 公共参数，主要存放自定义的搜索条件数据
 */
var jsonCondition=null;
/**
 * datatable基本设置
 * @sourceUrl 数据源Url
 * @columns 列
 */
function dataTableInit(sourceUrl,columns,columnDefs,pageLength){
	$('.table-sort').DataTable({
		// "dom": '<"top"i>rt<"bottom"flp><"clear">',  //设置分页的位置
		 "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表单：

<form id="form" action="" method="post" >
	<div class="text-c"> 
		 <label>商品分类：</label>
	  	<span class="select-box inline" style="margin:7px">
	  		<select id="categorySelect" name="categoryId" class="select" style="width:200px">
				<option value=''>--请选择--</option>
			</select>
		</span>
		 商品名称：<input type="text" name="goodsName" id="" placeholder="商品名称" style="width:200px" class="input-text">
		  商品ID：<input type="text" name="goodsId" id="" placeholder="商品ID" style="width:200px" class="input-text">
		<button name="" id="" onclick="search()" class="btn btn-success" type="button"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
	</div>  
 </form>

 

（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<T> 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<T> list = new ArrayList<T>();

    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<T>());
    }

    public Page(int pageNo, int pageSize, long count, List<T> 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 <= 1) {
            this.pageNo = this.first;
            this.firstPage = true;
        }

        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 <= 0 ? 10 : pageSize;
    }

    public int getFirst() {
        return first;
    }

    public int getLast() {
        return last;
    }

    public int getTotalPage() {
        return getLast();
    }

    public boolean isFirstPage() {
        return firstPage;
    }

    public boolean isLastPage() {
        return lastPage;
    }

    public int getPrev() {
        if (isFirstPage()) {
            return pageNo;
        } else {
            return pageNo - 1;
        }
    }

    public int getNext() {
        if (isLastPage()) {
            return pageNo;
        } else {
            return pageNo + 1;
        }
    }

    public List<T> getList() {
        return list;
    }

    public Page<T> setList(List<T> list) {
        this.list = list;
        initialize();
        return this;
    }

}

 （3）只有这些还不够，还要建立一个Pager对象，返回查询到的数据和分页信息；

public class Pager<T> {
	private int sEcho; //访问次数
	private long iTotalRecords;  //总记录数
	private long iTotalDisplayRecords;  //要展示的总记录数
	private int iDisplayStart;  //开始索引
	private int iDisplayLength;  //pageSize
	 
	@SuppressWarnings("rawtypes")
	private List aaData = new ArrayList();
	
	public Pager() {
		super();
	}
	
	public Pager<T> wrapPager(Page<T> page) throws Exception{
		
		this.setiTotalRecords(page.getCount());
		this.setiTotalDisplayRecords(page.getCount());
		this.setAaData(page.getList());
		return this;
	}

	public int getsEcho() {
		return sEcho;
	}

	public void setsEcho(int sEcho) {
		this.sEcho = sEcho;
	}
	
	public long getiTotalRecords() {
		return iTotalRecords;
	}

	public void setiTotalRecords(long iTotalRecords) {
		this.iTotalRecords = iTotalRecords;
	}

	public long getiTotalDisplayRecords() {
		return iTotalDisplayRecords;
	}

	public void setiTotalDisplayRecords(long iTotalDisplayRecords) {
		this.iTotalDisplayRecords = iTotalDisplayRecords;
	}

	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;
	}

	public List getAaData() {
		return aaData;
	}

	public void setAaData(List aaData) {
		this.aaData = aaData;
	}
}

（4）后台的准备工作已经做好，下边是controller层代码：

@RequestMapping(value = "/getData")
@ResponseBody
public Pager<GoodsCategoryPo> getData(@RequestBody PageVo pageVo) {
    //适合dataTable的分页信息转换成标准的分页信息
	Page<GoodsCategoryPo> page=new Page<GoodsCategoryPo>(pageVo.getCurrentPageNum(), pageVo.getiDisplayLength());
	try {
		page=goodsCategoryCacheService.findListByPage(page);
		return new Pager<GoodsCategoryPo>().wrapPager(page);
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}

  如果返回得page是带有你自定义的搜索条件的话，你需要重新定义一个对象，让这个对象继承这个PageVo对象。这样就可以接受全部的参数了。

最后：

当你完成这些，前台表格应该可以正常显示数据，但是还有一个不算是问题的问题，就是当你每次重新选择每页显示数量时，可能不能定位到第一页。如果在意这点的朋友，可以在js中加入下面的几行代码

/**
 * 改变pageLength自动定位到第一页
 */
$(function(){
	$('.dataTables_length select').on('change',function(){
		$('.table-sort').DataTable().page(0).draw( false );
	});
}); 

 

这是个人使用的时候的使用方法，如果看完还有疑问，欢迎留言！