jquery的DataTable插件有熟悉的吗?我想做服务器端分页 本帖最后由 tangjun147 于 2012-06-15 10:40:31 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 写一个分页的sql语句函数 利用OW_NUMBER() 来进行限制获得信息的范围 1.只要你给datatable的iTotalRecords和iTotalDisplayRecords赋值后它就能自动显示分页后的页数了2.iDisplayStart是起始显示的条数iDisplayLength每页显示的条数,直接在后台获取这两个属性的值再进行你的数据分页处理就可以了建议楼主看看官网上的例子,请求的时候用火狐分析一下,看看url后面跟的参数你就明白了。我也是前端时间用到这个做了个服务器端的分页和排序。不明白随时可以问我。 $oTable = $('#example').dataTable( { "bProcessing": true, "bAutoWidth": false, "sAjaxSource": baseUrl+"infoManage/findByCondiInfo.do", "bServerSide":true, //服务器端必须设置为true "sAjaxDataProp":"msgJson.list", "fnServerData": function (sSource, aoData, fnCallback ) { aoData.push({"name": "cateId", "value": $(currentNode).attr("id")}); aoData.push({"name": "publishRuleId", "value": $("#publishRule").val()}); aoData.push({"name": "keywords", "value": $("#keywords").val()}); aoData.push({"name": "startDate", "value": $("#startDate").val()}); aoData.push({"name": "endDate", "value": $("#endDate").val()}); aoData.push({"name": "state", "value": $("#state").val()}); aoData.push({"name": "infoType", "value": $("#infoType").val()}); aoData.push({"name": "sourceType", "value": $("#sourceType").val()}); $.ajax( { "dataType": 'json', "type": "post", "url": sSource, "data": aoData, "success": fnCallback } ); }, "sDom": '<"tableTip">rt<bottom>lip', "sPaginationType": "full_numbers", "oLanguage": { "sUrl":baseUrl+'js/common/111.txt' }, "aaSorting": [[ 8, "desc" ]], "aoColumns": [ { "mDataProp": null, "sWidth":"1%", bSortable:false, "fnRender": function(obj) { var sReturn = '<img src = "'+baseUrl+'images/details_open.png" style = "vertical-align:middle;" title="点击展开详细信息" />'; return sReturn; } }, { "mDataProp": null, "sWidth":"1%", bSortable:false, "fnRender": function(obj) { var sReturn = '<input type="checkbox" name = "checkRows"/>'; return sReturn; } }, {"mDataProp": null, bSortable:false, "sWidth":"5%" }, {"mDataProp": "infoCateId", "bSearchable": false, "bVisible": false }, {"mDataProp": "srcInfoId", "bSearchable": false, "bVisible": false }, {"mDataProp": "title", "sWidth":"23%", bSortable:false, "fnRender": function (oObj) { var title = oObj.aData.title; var infoCateId = oObj.aData.infoCateId; var temp = escapeHtmlTag(title); return '<a href="javascript:void(0);" onclick = "viewDetailInfo('+infoCateId+');return false;" title = "'+ temp.replace( new RegExp('"', "g"), "'") +'">' + temp + '</a>'; } }, {"mDataProp": "creator", "bSearchable": false, "bVisible": false }, {"mDataProp": "creatorName", "sWidth":"6%", bSortable:false }, {"mDataProp": "publishTime", "sWidth":"11%" }, {"mDataProp": function(source,type,val){ if(type === 'display' || type === 'filter'){ var str = ""; var type = source.state; if(type == 0){ str = "未发布"; }else if(type == 1){ str = "已发布 "; }else if(type == 2){ str = "重新编辑 "; } return str; } return source.state; }, "sWidth":"6%", bSortable:false }, {"mDataProp": "publishRuleId", "bSearchable": false, "bVisible": false } ], "fnDrawCallback": function (oSettings) { getRowIndex(oSettings, 2); $(":checkbox").attr("checked",false); } }); 请教一个学习流程 js调用html向前 javaScript错误:缺少对象 卸载360安全卫士,导致ajax报错:找不到指定的模块 javascript 怎么获取变量的前几个字符!急!在线等 一个小问题--如何从外部读取js文件 单击和双击的事件是什么啊 javascript 的“没有权限”问题 提交的问题 谷歌浏览器图片不显示。。 js里面if判断 为什么为什么为什么?
2.iDisplayStart是起始显示的条数iDisplayLength每页显示的条数,直接在后台获取这两个属性的值再进行你的数据分页处理就可以了
建议楼主看看官网上的例子,请求的时候用火狐分析一下,看看url后面跟的参数你就明白了。我也是前端时间用到这个做了个服务器端的分页和排序。不明白随时可以问我。
"bProcessing": true,
"bAutoWidth": false,
"sAjaxSource": baseUrl+"infoManage/findByCondiInfo.do",
"bServerSide":true, //服务器端必须设置为true
"sAjaxDataProp":"msgJson.list",
"fnServerData": function (sSource, aoData, fnCallback ) {
aoData.push({"name": "cateId", "value": $(currentNode).attr("id")});
aoData.push({"name": "publishRuleId", "value": $("#publishRule").val()});
aoData.push({"name": "keywords", "value": $("#keywords").val()});
aoData.push({"name": "startDate", "value": $("#startDate").val()});
aoData.push({"name": "endDate", "value": $("#endDate").val()});
aoData.push({"name": "state", "value": $("#state").val()});
aoData.push({"name": "infoType", "value": $("#infoType").val()});
aoData.push({"name": "sourceType", "value": $("#sourceType").val()});
$.ajax( {
"dataType": 'json',
"type": "post",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"sDom": '<"tableTip">rt<bottom>lip',
"sPaginationType": "full_numbers",
"oLanguage": {
"sUrl":baseUrl+'js/common/111.txt'
},
"aaSorting": [[ 8, "desc" ]],
"aoColumns": [
{ "mDataProp": null,
"sWidth":"1%",
bSortable:false,
"fnRender": function(obj) {
var sReturn = '<img src = "'+baseUrl+'images/details_open.png" style = "vertical-align:middle;" title="点击展开详细信息" />';
return sReturn;
}
},
{ "mDataProp": null,
"sWidth":"1%",
bSortable:false,
"fnRender": function(obj) {
var sReturn = '<input type="checkbox" name = "checkRows"/>';
return sReturn;
}
},
{"mDataProp": null,
bSortable:false,
"sWidth":"5%"
},
{"mDataProp": "infoCateId",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "srcInfoId",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "title",
"sWidth":"23%",
bSortable:false,
"fnRender": function (oObj) {
var title = oObj.aData.title;
var infoCateId = oObj.aData.infoCateId;
var temp = escapeHtmlTag(title);
return '<a href="javascript:void(0);" onclick = "viewDetailInfo('+infoCateId+');return false;" title = "'+ temp.replace(
new RegExp('"', "g"), "'") +'">' + temp + '</a>';
}
},
{"mDataProp": "creator",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "creatorName",
"sWidth":"6%",
bSortable:false
},
{"mDataProp": "publishTime",
"sWidth":"11%"
},
{"mDataProp": function(source,type,val){
if(type === 'display' || type === 'filter'){
var str = "";
var type = source.state;
if(type == 0){
str = "未发布";
}else if(type == 1){
str = "已发布 ";
}else if(type == 2){
str = "重新编辑 ";
}
return str;
}
return source.state;
},
"sWidth":"6%",
bSortable:false
},
{"mDataProp": "publishRuleId",
"bSearchable": false,
"bVisible": false
}
],
"fnDrawCallback": function (oSettings) {
getRowIndex(oSettings, 2);
$(":checkbox").attr("checked",false);
}
});