html代碼
<table cellpading="0" cellspacing="0" border="0" class="dTable acelistTable"> <thead> <tr> <th>用戶名</th> <th>跟隨</th> <th>新外匯指數</th> <th>月均交易(手)</th> <th>賬戶余額($)</th> <th>近一個月收益</th> <th>當前持倉(單)</th> <th>浮動收益($)</th> <th>狀態</th> <th>操作</th> </tr> </thead> <!--tbody可以不寫--> <!--<tbody></tbody>--> <!--tfoot 可選--> <tfoot> <tr> <th>用戶名</th> <th>跟隨</th> <th>新外匯指數</th> <th>月均交易(手)</th> <th>賬戶余額($)</th> <th>近一個月收益</th> <th>當前持倉(單)</th> <th>浮動收益($)</th> <th>狀態</th> <th>操作</th> </tr> </tfoot> </table>
js代碼
var oTable = $('.acelistTable').dataTable(
{
"sPaginationType": "full_numbers", //分頁風格，full_number會把所有頁碼顯示出來（大概是，自己嘗試）
"sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待補充
"iDisplayLength": 10,//每頁顯示10條數據
"bAutoWidth": false,//寬度是否自動，感覺不好使的時候關掉試試
"bLengthChange": false,
"bFilter": false,
"oLanguage": {//下面是一些漢語翻譯
"sSearch": "搜索",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "沒有檢索到數據",
"sInfo": "顯示 _START_ 至 _END_ 條 共 _TOTAL_ 條",
"sInfoFiltered": "(篩選自 _MAX_ 條數據)",
"sInfoEmtpy": "沒有數據",
"sProcessing": "正在加載數據...",
"sProcessing": "<img src='{{rootUrl}}global/img/ajaxLoader/loader01.gif' />", //這里是給服務器發請求后到等待時間顯示的 加載gif
"oPaginate":
{
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "后一頁",
"sLast": "末頁"
}
},
"bProcessing": true, //開啟讀取服務器數據時顯示正在加載中……特別是大數據量的時候，開啟此功能比較好
"bServerSide": true, //開啟服務器模式，使用服務器端處理配置datatable。注意：sAjaxSource參數也必須被給予為了給datatable源代碼來獲取所需的數據對於每個畫。 這個翻譯有點別扭。開啟此模式后，你對datatables的每個操作 每頁顯示多少條記錄、下一頁、上一頁、排序（表頭）、搜索，這些都會傳給服務器相應的值。
"sAjaxSource": "{{rootUrl}}ace_management/ace_list", //給服務器發請求的url
"aoColumns": [ //這個屬性下的設置會應用到所有列，按順序沒有是空
{"mData": 'nickname'}, //mData 表示發請求時候本列的列明，返回的數據中相同下標名字的數據會填充到這一列
{"mData": 'follower_count'},
{"mData": 'rank'},
{"mData": 'month_count'},
{"mData": 'equity'},
{"mData": 'month_ror'},
{"mData": 'now_orders'},
{"mData": 'profit_total'},
{"sDefaultContent": ''}, // sDefaultContent 如果這一列不需要填充數據用這個屬性，值可以不寫，起占位作用
{"sDefaultContent": '', "sClass": "action"},//sClass 表示給本列加class
],
"aoColumnDefs": [//和aoColums類似，但他可以給指定列附近愛屬性
{"bSortable": false, "aTargets": [1, 3, 6, 7, 8, 9]}, //這句話意思是第1,3,6,7,8,9列（從0開始算） 不能排序
{"bSearchable": false, "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9]}, //bSearchable 這個屬性表示是否可以全局搜索，其實在服務器端分頁中是沒用的
],
"aaSorting": [[2, "desc"]], //默認排序
"fnRowCallback": function(nRow, aData, iDisplayIndex) {// 當創建了行，但還未繪制到屏幕上的時候調用，通常用於改變行的class風格
if (aData.status == 1) {
$('td:eq(8)', nRow).html("<span class='text-error'>審核中</span>");
} else if (aData.status == 4) {
$('td:eq(8)', nRow).html("<span class='text-error'>審核失敗</span>");
} else if (aData.active == 0) {
$('td:eq(8)', nRow).html("<span>隱藏</span>");
} else {
$('td:eq(8)', nRow).html("<span class='text-success'>顯示</span>");
}
$('td:eq(9)', nRow).html("<a href='' user_id='" + aData.user_id + "' class='ace_detail'>詳情</a>");
if (aData.status != 1 && aData.status != 4 && aData.active == 0) {
$("<a class='change_ace_status'>顯示</a>").appendTo($('td:eq(9)', nRow));
} else if (aData.status != 1 && aData.status != 4 && aData.active == 1) {
$("<a class='change_ace_status'>隱藏</a>").appendTo($('td:eq(9)', nRow));
}
return nRow;
},
"fnInitComplete": function(oSettings, json) { //表格初始化完成后調用 在這里和服務器分頁沒關系可以忽略
$("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "請輸入高手用戶名");
}
}
);
服務器端代碼
先說一下我們需要的目標格式是這樣
{ "sEcho": 3, "iTotalRecords": 57, "iTotalDisplayRecords": 57, "aaData": [ [ "Gecko", "Firefox 1.0", "Win 98+ / OSX.2+", "1.7", "A" ], [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" ], ... ] }
是一個json串
接着上php代碼
$sEcho = XUtil::xget('sEcho'); // DataTables 用來生成的信息 $start = XUtil::xget('iDisplayStart'); //顯示的起始索引 $length = XUtil::xget('iDisplayLength');//顯示的行數 $sort_th = XUtil::xget('iSortCol_0');//被排序的列 $sort_type = XUtil::xget('sSortDir_0');//排序的方向 "desc" 或者 "asc". $search = XUtil::xget('sSearch');//全局搜索字段 //下面的代碼就是根據上面的信息取數據並且組織信息 $agent_id = $this->vdata['agent_user']->id; if ($sort_th == 2) { $order_key = "et.rank"; } elseif ($sort_th == 4) { $order_key = "ea.equity"; } elseif ($sort_th == 5) { $order_key = "et.month_ror"; } else { $order_key = "cu.nickname"; } $total = AgentUtil::get_total_ace_acount($agent_id); $price_table = $this->get_price_table(); $sql = "select aul.user_id , cu.nickname, et.rank, ea.equity, et.month_ror, aul.active, cmt.`status`, cmt.fail_type from agent_user_list aul left join common_userprofile cu on cu.user_id = aul.user_id left join ea_traderlistindex et on et.user_id = aul.user_id left join ea_account ea on ea.id = et.account_id left join common_mt4_trusteeship cmt on cmt.user_id = aul.user_id where et.visible = 1 and aul.agent_id = {$agent_id} and aul.type=1 and cu.nickname like '%{$search}%' order by {$order_key} {$sort_type} limit {$start},{$length}"; $res = Doo::db()->fetchAll($sql); $display_total = count($res); $aaData = array(); foreach ($res as $k => $v) { $user_id = $v['user_id']; $aaData[$k]['nickname'] = $v['nickname']; //還記得剛才給每一列的mData設置的名字么 和這里是對應的 $aaData[$k]['follower_count'] = UserUtil::get_follower_count($user_id, $agent_id); $aaData[$k]['rank'] = XUtil::tofloat($v['rank'] * 100); $aaData[$k]['month_count'] = XUtil::tofloat(UserUtil::get_month_count($user_id)); $aaData[$k]['equity'] = XUtil::tofloat($v['equity']); $aaData[$k]['month_ror'] = XUtil::tofloat($v['month_ror'] * 100) . '%'; $aaData[$k]['now_orders'] = UserUtil::get_now_orders($user_id); $aaData[$k]['profit_total'] = XUtil::tofloat(UserUtil::get_profit_total($user_id, $price_table)); $aaData[$k]['status'] = $v['status']; $aaData[$k]['fail_type'] = $v['fail_type']; $aaData[$k]['active'] = $v['active']; $aaData[$k]['user_id'] = $v['user_id']; } $output['sEcho'] = $sEcho; if ($search) {//如果有全局搜索，搜索出來的個數 $output['iTotalDisplayRecords'] = $display_total; } else { $output['iTotalDisplayRecords'] = $total; } $output['iTotalRecords'] = $total; //總共有幾條數據 $output['aaData'] = $aaData; echo json_encode($output); //最后把數據以json格式返回
上面displaytotal的處理方式有問題,當全局搜索存在時, displaytotal等於按條件搜索的全部數量,注意自己該下
有個需求要求打開某個頁面，會自動列出所有數據，然后上面有表單個提交，要求提交表單后表格數據刷新。
實現辦法就是表單用js驗證成功后組織一個加上參數的url，最后
var oSettings = oTable.fnSettings(); oSettings.sAjaxSource = new_filter_url; oTable.fnDraw();