高分请教,如何使用 datatable,路过有分,急(datatable jquery struts2) 本帖最后由 liubin041102 于 2010-12-02 15:30:36 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 项目框架目前不支持返回json串,没办法只能利用其它方式了,唉 说下我以前的做法,用PHP 生成JSON 串。格式可参考Datatables自带的那个。用Datatables直接获取URL的数据我还没用过,他这个貌似是读取全部数据生成分页的,这样的话在碰到大批量数据的时候会很卡,所以我放弃了这个。js代码如下//初始化Datatablevar datatables = null;function ListPages() { if (datatables == null) { //仅第一次检索时初始化Datatable //添加单击选中行事件 $("#data_table tbody").click(function(event) { $(datatables.fnSettings().aoData).each(function (){ $(this.nTr).removeClass('row_selected'); }); $(event.target.parentNode).addClass('row_selected'); }); datatables=$('#data_table').dataTable( { "bProcessing": true, //"bStateSave": true, //保存状态到cookie //"bDestroy":true, "sPaginationType": "full_numbers",//分页样式 "oLanguage": { "sProcessing": "正在加载数据...", 'sSearch': '数据筛选:', "sLengthMenu": "每页显示 _MENU_ 项记录", "sZeroRecords": "没有符合项件的数据...", "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据;总共有 _TOTAL_ 项记录", "sInfoEmpty": "显示 0 至 0 共 0 项", "sInfoFiltered": "(_MAX_)" } //设定是否参加排序 ,"aoColumns": [ { "bSortable": false },null,null,null,null,null,null,{ "bSortable": false } ] }); datatables.fnDeleteRow(0);//删除首行,可不用 } else{ datatables.fnClearTable();//清除历史数据 } datatables.fnDraw();//重绘} //"检索"按钮的处理函数function get_datalist(is_search){ $("#data_table tbody tr").remove(); $("#load").show(); var agent_list=""; $.ajax({ type: "post", dataType: "json", url: "/include/pub_func.php", data:{ action:"get_customer_list_search", is_search:is_search, randoms:Math.random(), begintime:$("#begintime").val(), endtime:$("#endtime").val() }, cache:false, beforeSend:function(){$('#load').show('100');}, complete :function(){$('#load').hide('100');}, success: function(json){ var data = json.data; if(json.results.result=="yes"){ ListPages();//调用DataTables 方法,应用在#data_table var row_id,row_edit; $.each(data, function(index,content){ row_id="<input type='checkbox' class='checkbox' value='"+content.id+"' name='data_id' />"; row_edit="<img src=\"/resources/images/icons/tick_circle.png\" alt=\"修改\" align=\"absmiddle\" /><a href=\"javascript:void(0);\"> 删除</a> <img src=\"/resources/images/icons/cross.png\" alt=\"删除\" align=\"absmiddle\" /><a href=\"javascript:void(0);\"> 修改</a>"; datatables.fnAddData([row_id,row_edit]);//Datatables自带的添加数据方法,你可以搜下fnAddData }); }else { //如果获取的数据为空就初始化Datables if(datatables){ datatables.fnClearTable() }else{ var row_str="<tr id='ready'><td colspan=\"20\">"+msg.results.description+"</td></tr>" $("#data_table").append(row_str); } } } });} Json代码如下,你可以修改为自己用的格式:{"result":"yes","description":"成功...","count":"12","data":[{"id":"","other":"other"},{"id":"","other":"other"}]} 谢谢,按照下面的方法可以实现,翻页,重设置每页显示条数,都会自动重新从服务器端查询, table = $('#example').dataTable({ "bFilter": false, "sAjaxSource": "reportAnalyze/historyReportData.action", "bServerSide": true, "bProcessing": true });返回数据格式:{ "sEcho": $sEcho, "iTotalRecords": $total, "iTotalDisplayRecords": $displayTotal, "aaData": [['asdf']['afsd']...] }重要是 sEcho。这样就可以实现想要的功能了 关于IE8下调试JS的问题--“无法附加进程,进程可能附加了另一个调试程序” extjs中怎么打开下载地址 郁闷,FF下为什么不支持pixelWidth,用啥能代替的? 关于层与层之间的切换问题求助,DIV+JS 关于js的问题 如何写个样式,让当前网页的所有连接不在状态栏显示,但状态栏显示 代码没有执行???? 利用textarea制作在线编辑器中出现的问题? hrong兄,救急!! 安卓版微信打开HTML5视频退出全屏后页面底部多了一条菜单 html5音乐播放器 关于JSP页面下载文件的问题,JS高手来帮忙指点下
//初始化Datatable
var datatables = null;
function ListPages() {
if (datatables == null) { //仅第一次检索时初始化Datatable
//添加单击选中行事件
$("#data_table tbody").click(function(event) {
$(datatables.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
datatables=$('#data_table').dataTable( {
"bProcessing": true,
//"bStateSave": true, //保存状态到cookie
//"bDestroy":true,
"sPaginationType": "full_numbers",//分页样式
"oLanguage": {
"sProcessing": "正在加载数据...",
'sSearch': '数据筛选:',
"sLengthMenu": "每页显示 _MENU_ 项记录",
"sZeroRecords": "没有符合项件的数据...",
"sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据;总共有 _TOTAL_ 项记录",
"sInfoEmpty": "显示 0 至 0 共 0 项",
"sInfoFiltered": "(_MAX_)"
}
//设定是否参加排序
,"aoColumns": [
{ "bSortable": false },null,null,null,null,null,null,{ "bSortable": false }
]
});
datatables.fnDeleteRow(0);//删除首行,可不用
} else{
datatables.fnClearTable();//清除历史数据
}
datatables.fnDraw();//重绘
}
//"检索"按钮的处理函数
function get_datalist(is_search){
$("#data_table tbody tr").remove();
$("#load").show();
var agent_list="";
$.ajax({
type: "post",
dataType: "json",
url: "/include/pub_func.php",
data:{
action:"get_customer_list_search",
is_search:is_search,
randoms:Math.random(),
begintime:$("#begintime").val(),
endtime:$("#endtime").val()
},
cache:false,
beforeSend:function(){$('#load').show('100');},
complete :function(){$('#load').hide('100');},
success: function(json){
var data = json.data;
if(json.results.result=="yes"){
ListPages();//调用DataTables 方法,应用在#data_table
var row_id,row_edit;
$.each(data, function(index,content){
row_id="<input type='checkbox' class='checkbox' value='"+content.id+"' name='data_id' />"; row_edit="<img src=\"/resources/images/icons/tick_circle.png\" alt=\"修改\" align=\"absmiddle\" /><a href=\"javascript:void(0);\"> 删除</a> <img src=\"/resources/images/icons/cross.png\" alt=\"删除\" align=\"absmiddle\" /><a href=\"javascript:void(0);\"> 修改</a>";
datatables.fnAddData([row_id,row_edit]);//Datatables自带的添加数据方法,你可以搜下fnAddData
});
}else {
//如果获取的数据为空就初始化Datables if(datatables){
datatables.fnClearTable()
}else{
var row_str="<tr id='ready'><td colspan=\"20\">"+msg.results.description+"</td></tr>"
$("#data_table").append(row_str);
}
}
}
});
}
Json代码如下,你可以修改为自己用的格式:
{"result":"yes","description":"成功...","count":"12","data":[{"id":"","other":"other"},{"id":"","other":"other"}]}
按照下面的方法可以实现,翻页,重设置每页显示条数,都会自动重新从服务器端查询,
table = $('#example').dataTable({
"bFilter": false,
"sAjaxSource": "reportAnalyze/historyReportData.action",
"bServerSide": true,
"bProcessing": true
});返回数据格式:
{
"sEcho": $sEcho,
"iTotalRecords": $total,
"iTotalDisplayRecords": $displayTotal,
"aaData": [['asdf']['afsd']...]
}重要是 sEcho。
这样就可以实现想要的功能了