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": '<"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表单：

	
 
		 商品分类：
	  	
	  		
				--请选择--
			
		
		 商品名称：
		  商品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 <= 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 getList() {
        return list;
    }

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

}

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

public class Pager {
	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 wrapPager(Page 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 getData(@RequestBody PageVo pageVo) {
    //适合dataTable的分页信息转换成标准的分页信息
	Page page=new Page(pageVo.getCurrentPageNum(), pageVo.getiDisplayLength());
	try {
		page=goodsCategoryCacheService.findListByPage(page);
		return new Pager().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 );
	});
}); 

 

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