Datatableページングガイド--フロントページングとバックグラウンドページング
12951 ワード
一、紹介
Datablesはjqueryテーブルプラグインです.高度に柔軟なツールであり、HTMLテーブルに高度なインタラクティブ機能を追加できます.ページ、インスタント検索とソート は、DOM、javascript、Ajax、サーバ処理 のほとんどのデータソースをサポートします.は、異なるトピックDataTable、jQuery UI、Bootstrap、Foundation をサポートします.様々な拡張:Editor,TableTools,FixedColumns...... 多様なoptionと強力なAPI 国際化 をサポートが2900+ユニットテスト を超えた
二、導入
、html
、jsコード
リクエストajaxをクリックし、レンダリングデータを します.
はフロントのページングです.バックグラウンドのページングをするには、もちろんバックグラウンドでページングしたほうがいいです.
1.datatable の 、
2.バックグラウンドで ページのデータ、 のページパラメータを できます.
のバックグラウンドはstruts 2で かれていますが、 のものもrequestで できます.この は にバックエンドに に り、バックエンドでデータベースを するとき、この2つのパラメータに づいて にページを けることができます.
フロント・バックグラウンド・データのインタラクション:
フロントフォーマット:
:
バックグラウンドから されるjsonデータ:
ドキュメント:クリックしてリンクを く
Datablesはjqueryテーブルプラグインです.高度に柔軟なツールであり、HTMLテーブルに高度なインタラクティブ機能を追加できます.
二、導入
、html
id
id
GPRS
、jsコード
var table1;
//dataTable
function bigDataTable(queryData){
table1= $('#bigDataList').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"aaSorting" : [[0, "asc"]], // ， 1 ，
"info": true,
"autoWidth": false,
"destroy":true,
"processing":true,
"scrollX": true, //
// "serverSide":true, //true ，false
"aLengthMenu":[10,15,20],
"PaginationType" : "full_numbers", // ，
// ， ， Datatables
"deferRender": true,
"ajax":{
url:"getJson_BigData_queryDataByParams",
dataSrc:
function(data){
if(data.callbackCount==null){
data.callbackCount=0;
}
//
if(data.sqlException){
alert(data.sqlException);
}
//
$("#queryDataByParams").removeAttr("disabled");
return data.dataList; // ， data
}, //dataSrc success， datatable success ， datatable
type:"post",
data:queryData
},
columns:[
{ data: 'user_ip' },
{ data: 'calling'},
{ data: 'imei' },
{ data: 'cell_id'},
{ data: 'service_type' },
{ data: 'service_group'},
{ data: 'lac' },
{ data: 'sgsn'},
{ data: 'assignment_count' },
{ data: 'proto_type'},
{ data: 'start_time' },
{ data: 'end_time'},
],
/* */
"bJQueryUI": true,
"oLanguage": { //
"sLengthMenu": " _MENU_ ",
"sZeroRecords": " ， ",
"sInfo": " _START_ _END_ / _TOTAL_ ",
"sInfoEmpty": " ",
"sInfoFiltered": "( _MAX_ )",
"sZeroRecords": " ",
"sSearch": " :",
"oPaginate": {
"sFirst": " ",
"sPrevious": " ",
"sNext": " ",
"sLast": " "
}
},
});
}リクエストajaxをクリックし、レンダリングデータを します.
//
$("#queryDataByParams").on("click",function() {
var reg = new RegExp("^[0-9]*$");
var startTime=$("#searchDateRange").val().substring(0,19).replace(/-/g, '/');
var endTime=$("#searchDateRange").val().substring(22,41).replace(/-/g, '/');
var date1=new Date(startTime); //
var date2=new Date(endTime); //
var date3=date2.getTime()-date1.getTime() //
if(date3>60*60*24*1000){
alert(" 24 ！");
return false;
}
if(!$("#searchDateRange").val() || $("#searchDateRange").val()==" "){
alert(" ！");
return false;
}
if(!$("#calling").val() && !reg.test($("#calling").val())){
alert(" !");
}
//
$("#queryDataByParams").attr("disabled", true);
var queryData={"startseg":$("#searchDateRange").val(),
"callseg":$("#calling").val(),
"identifiCode":$("#identifiCode").val(),
"areaId":$("#areaId").val(),
"serviceType":$("#serviceType").val(),
"serviceGroup":$("#serviceGroup").val(),
"areaCode":$("#areaCode").val(),
"gprsNode":$("#gprsNode").val(),
"distritNum":$("#distritNum").val(),
"protocolType":$("#protocolType").val()
};
if(table1!=null || table1 !=undefined){
// dataTable ， ，( )
// table1.destroy();
// bigDataTable(queryData);
// var src={
// url:"getJson_BigData_queryDataByParams",
// dataSrc :"dataList", // ， data
// type:"post",
// data:{"test":$("#protocolType").val()}
// };
// table1.fnSettings().ajax=src; //ajax
// table1.fnPageChange(0,true); // 0
table1.settings()[0].ajax.data=queryData;
table1.ajax.reload();
}else{
bigDataTable(queryData);
}
});はフロントのページングです.バックグラウンドのページングをするには、もちろんバックグラウンドでページングしたほうがいいです.
1.datatable の 、
"serverSide":true, //true ，false 2.バックグラウンドで ページのデータ、 のページパラメータを できます.
private int length;
private int start:
public int getLength(){
return length;
}
public void setLength(int length){
this.length = length;
}
public int getStart(){
return start;
}
public void setStart(int start){
this.start = start;
}のバックグラウンドはstruts 2で かれていますが、 のものもrequestで できます.この は にバックエンドに に り、バックエンドでデータベースを するとき、この2つのパラメータに づいて にページを けることができます.
public String dataPaging(){
resultJson = new HashMap();
searchItem = getRequest().getParameter("extra_search");
List list = new ArrayList();
list = logService.queryForPaging(start,length,searchItem);
int count = logService.queryForPagingSize(searchItem);
resultJson.put("draw", Integer.toString(draw));
resultJson.put("recordsTotal", Integer.toString(count));
resultJson.put("recordsFiltered", Integer.toString(count));
resultJson.put("data", list);
return "success";
} public List queryForPaging(int start,int length,String query) {
Criteria cri = getSession().createCriteria(this.persistentClass);
cri.addOrder(Order.desc("id")).setFirstResult(start).setMaxResults(length);
if(query != null && !"".equals(query)){
cri.add(Restrictions.like("username", query, MatchMode.ANYWHERE));
}
List list = cri.list();
return list;
} フロント・バックグラウンド・データのインタラクション:
フロントフォーマット:
ID
columns:[
{ data: 'id' },
{ data: 'storeInfo.realName'},
{ data: 'content' },
{ data: 'startTime',
"render": function ( data, type, full, meta ) {
var dataStr = Date.parse(data);
return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
}
},
{ data: 'endTime',
"render": function ( data, type, full, meta ) {
var dataStr = Date.parse(data);
return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
}
},
{data:'id',
"render": function ( data, type, full, meta ) {
var edithtml =" "+
""
return edithtml;
}
}
],:
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //
"d+": this.getDate(), //
"h+": this.getHours(), //
"m+": this.getMinutes(), //
"s+": this.getSeconds(), //
"q+": Math.floor((this.getMonth() + 3) / 3), //
"S": this.getMilliseconds() //
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}バックグラウンドから されるjsonデータ:
{
"resultList": [
{
"content": " ",
"endTime": "2016-01-03T22:00:00",
"id": 1,
"startTime": "2016-01-01T08
:00:00",
"storeInfo": {
"buildingId": 3,
"buildingName": " ",
"floorId": 4,
"floorName": " ",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": " ",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": " "
}
},
{
"content": " ， ， ",
"endTime": "2015-12-30T14:43:38",
"id": 2,
"startTime": "2015-12-29T14:43:34",
"storeInfo": {
"buildingId": 3,
"buildingName": " ",
"floorId": 4,
"floorName": " ",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": " ",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": " "
}
},
{
"content": " ， ，
， ",
"endTime": "2016-02-15T14:45:05",
"id": 3,
"startTime": "2016-02-01T14:44:53",
"storeInfo": {
"buildingId": 3,
"buildingName": " ",
"floorId": 4,
"floorName": " ",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": "
",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": " "
}
}
]
}ドキュメント:クリックしてリンクを く