DataTables ajax bootstrap 分頁/搜索/排序/常見問題
最近學校的網站建設須要,嘗試使用了下Jquery dataTables控件,我使用的是官網最新的DataTables-1.10.15版本,我的在使用的過程當中遇到了至關多的問題,有的是數據顯示問題,還有的是request unknown parameter xxx for row..,還有搜索帶來的刷新以後沒法還原問題,這些問題我下面會逐一解釋css
我的感受dataTables對於第一次接觸的人來講,屬性超多,讓人看的眼花繚亂.我在網上搜到的大部分資料感受對於新手來講有些複雜,特別是ajax請求那塊,因爲dataTables提供的ajax請求方式很是多,加上各個版本的函數和屬性名等的差別,讓人看的非常頭疼,很少說進入正題html
1.使用步驟mysql
1.1引入必須的js,css文件等我就不在重複了,這裏須要注意的是若是你是在使用了網上的模板從而須要對模板中的dataTable進行拓展的話,請你必定搞清楚你使用的版本,不然你在寫代碼時可能會遇到屬性名和官方給出的不一致的問題,其次你的html部分至少要有<table>標籤和<thead>ajax
1.2初始化與常見屬性介紹spring
先說一個看上去複雜實則很簡單的屬性------------國際化(語言配置):其餘的一些未標註的屬性與之相相似sql
其餘零散屬性:json
還有一個重要屬性columnsDefs,這個屬性用來設置列的屬性,他不必定要和你的表格的列的數目徹底同樣,bootstrap
targets屬性指定列,orderable屬性表示此列是否參與排序,name是對這一列的描述,title固然是列名了,最重要的有兩個api
data和render,其中data負責指定數據源,他指定的是你從服務器返回的json數據中的實體對象的屬性(事實上你也能夠直接寫數組),這個屬性下面分頁時還會具體講,數組
render英文意爲渲染,能夠看到render中帶有data參數,能夠把他理解爲對數據的進一步處理,能夠看到個人第一列使用了render,他構造了一個checkbox填充到了第一列中,並無
使用從服務器返回的data
"columnDefs": [ { "targets":[0], "render": function(data, type, row, meta) { return '<label><input type="checkbox" class="ace" /><span class="lbl"></span></label>'; }, "orderable":false, "width":"50px" }, { "title":"序號", "name":"1_id", "data":"id", "targets":[1], "width":"50px", "orderable":false, }, { "title":"新聞標題", "name":"2_title", "data":"title", "targets":[2], "render":function(data) { if(data.length > 25) { data = data.substring(0,25) + "..."; } return data; }, "orderable":false, "width":"400px" }, { "data":null, "targets":[3], "visible": false, "searchable": false, "orderable":false }, { "title":"發佈時間", "name":"4_releaseTime", "data":"releaseTime", "targets":[4], "width":"300px", "orderable":true, "orderData":[4], }, { "title":"所在板塊", "name":"5_smallId", "data":"menu.name", "targets":[5], "width":"300px", "orderable":true, "orderData":[5], }, { "title":"操做", "targets":[6], "render":function(data,type,row,meta) { var newsId = row.id; //<a class="green" data-toggle="tooltip" data-placement="top" title="查看詳細" href="#"><i class="icon-pencil bigger-130"></i></a>
return '<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons"><a class="blue" data-toggle="tooltip" data-placement="top" title="查看詳細" href="#"><i class="icon-zoom-in bigger-130"></i></a> <a class="red" data-toggle="tooltip" data-placement="top" title="刪除" href="#"><i class="icon-trash bigger-130"></i></a></div><div class="visible-xs visible-sm hidden-md hidden-lg">'; }, "orderable":false, "width":"200px" } ],
infoCallBack,這是一個回調函數(屬性),在表格狀態信息改變後進行調用,所謂狀態信息我的認爲指的是表格的分頁參數(長度,頁碼),和排序,繪製等一列信息,
"infoCallback": function(settings,start,end,max,total,pre) { //激活工具提示
$("[data-toggle='tooltip']").tooltip(); //圖標功能
$("#sample-table-2 tbody").on( 'click', 'tr', function () { var id = $(this).find("td").eq(1).text(); if(id) { $(".blue").attr("href","${pageContext.request.contextPath}/newsController/edit.action?id="+id); } }); $(".red").click(function() { $(this).parents("tr").find("td").eq(0).find(":checkbox").attr("checked",true); var ids = new Array(); //添加id到數組
$(":checkbox:checked").each(function(i) { if($(this).parents("tr").find("td").eq(1).text()) { ids[i] =$(this).parents("tr").find("td").eq(1).text(); } }) if(window.confirm("肯定要刪除嗎?")) { if(ids.length>0) { $.ajax({ type:"POST", url:"${pageContext.request.contextPath}/newsController/hide.action", data:{"ids":ids}, traditional :true, success:function(){ window.location.reload(); } }) } } }); var api = this.api(); var pageInfo = api.page.info(); // alert(JSON.stringify(pageInfo));
return "共"+pageInfo.pages +"頁,當前顯示"+ start + "到" + end + "條記錄" + ",共有"+ total + "條記錄"; },
上面講到的屬性及函數只是我用到的,有些屬性下面會具體的講有不清楚的能夠到官網去查,這裏只作一個簡略介紹
1.3分頁
建議剛開始使用的時候不要想着什麼排序,搜索之類的,你先把你的數據顯示出來再說
1.3.1環境:springmvc+hibernate+spring+mysql
分頁的話先要開啓服務器模式,把分頁交給服務器來處理,以後調用ajax,請求成功後數據渲染,ok了
提及來很容易,但要講起來不少,在你開啓服務器模式 "serverSide": true而且進行ajax請求時發生了這些事情
首先你的dataTables向服務器端發生了不少參數,好比draw(表格繪製次數).length(每頁顯示的數據量),start,page等參數
那麼你的服務器接收到請求後又發生了什麼?draw,data(返回的數據),recordsTotal(總記錄數),好了如今能夠講ajax如何
發生請求,官網上有不少種ajax的寫法,我挑了種我本身比較能接受的一種,你本身作的時候能夠試下alert(JSON.stringify(data))看看
dataTables發送的data到底有哪些參數(如下部分代碼來自官網的demo)
1 "ajax":function(data,callback,settings) { 2 //參數封裝
3 var param = {}; 4 param.draw = data.draw; 5 param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
6 param.start = data.start;//開始的記錄序號
7 param.page = (data.start / data.length)+1; 8 param.filter = data.search.value;//過濾條件
9 // alert(JSON.stringify(data));
10 alert(JSON.stringify(data.order)) 11 //單排序條件
12 /* if(data.order) { 13 if(data.order[0].dir) { 14 param.order = "releaseTime" + " " + data.order[0].dir; 15 } 16 } */
17 //多排序條件
18 param.order = " "; 19 if(data.order) { 20 $.each(data.order,function(index,value){ 21 var col = data.order[index].column; 22 $.each(data.columns,function(i,v) { 23 var name = data.columns[i].name; 24 if(name) { 25 if(col == window.parseInt(name)) { 26 var arr = name.split("_"); 27 param.order += arr[1] + " " + data.order[index].dir + ","; 28 } 29 } 30 }) 31 }) 32 } 33 param.order= param.order.substring(0,param.order.length-1); 34 $.ajax({ 35 type:"POST", 36 url:"${pageContext.request.contextPath}/newsController/getAllNews.action", 37 data:param, 38 cache:false, 39 dataType:"json", 40 success:function(result) { 41 var returnData = {}; 42 returnData.draw = result.draw;//我的感受這裏直接寫data.draw也能夠
43 returnData.recordsTotal = result.recordsTotal;//返回數據所有記錄
44 returnData.recordsFiltered = result.recordsFiltered;//後臺不實現過濾功能，每次查詢均視做所有結果
45 returnData.data = result.data;//返回的數據列表
46 //更改時間格式
47 for(var i=0;i<result.data.length; i++) { 48 result.data[i].releaseTime = new Date(result.data[i].releaseTime).toLocaleDateString(); 49 } 50 //回調函數(數據渲染)
51 callback(returnData); 52 }, 53 error:function(ajax,textStatus) { 54 /* alert(JSON.stringify(ajax)); 55 alert(textStatus); */
56 alert("未找到數據"); 57 } 58 }) 59 },
既然ajax發送了請求,服務器該如何應答?
好了應答完畢,輪到客戶端渲染了,還記得上面講屬性時的columnDefs中的data屬性嗎?上面說了他用來指定數據源,請結合個人實體類對象News
你會發現我上面columnDefs中的data的值對應着個人實體類,由於我在服務器端的map中返回了一個List<News>,這能夠理解爲一種映射
好了,既然數據源指定完畢,處理下result,若是你對傳回的result不須要特殊處理(如調整時間格式等直接把result傳到callback中也是能夠的,),直接渲染就行了
至此,分頁解決,總結以下
1.開啓serverside,調用ajax
2.封裝分頁參數發送給服務端,同時指定好數據源
3.服務器段返回規定的必要參數
4.渲染
常見分頁問題:
1.request unknown parameter xxx for row..,
檢查的你的列的設置,我以前設置了一個列隱藏,可是忘記指定隱藏列的數據源,致使此錯誤
2.分頁數據顯示不全,明明有20條數據,下拉菜單選擇每頁顯示10條數據時只有一頁
檢查你返回的recordsTotal與recordsFiltered參數是否符合你指望的數據總量
1.4搜索
我這裏作的搜索極其簡單,僅僅是新聞的標題檢索,原本老師說能夠用luence,然而沒接觸過,先用like湊合吧
1.4.1自定義搜索框
官網給出的搜索框連個搜索圖標都沒得,因此只能是key up事件觸發搜索,遂改之,加了個bootstrap官網的搜索圖標
1 var search = "<div class='input-group'><input type='search' class='form-control input-sm' placeholder='標題檢索' aria-controls='sample-table-2'><div class='input-group-addon'><span class='glyphicon glyphicon-search' id='search'></span></div></div>"; 2 $("#sample-table-2_filter label").html(search); 3 $(".glyphicon-search").css("cursor","pointer");
1.4.2搜索請求的發送
思路:獲取搜索框的值,而後發送,返回數據後從新繪製表格便可(draw)
當你爲搜索圖標綁定點擊事件調用search方法後你會發現後臺接收到了一次ajax請求,並且這個這個請求中包含的參數很熟悉,你上面分頁時的draw,start等參數
竟然都包含在此次ajax請求中,so你的search方法調用的是你上面分頁時的ajax請求,因此咱們考慮如何在咱們上面寫的ajax請求中加入過濾條件,把filter傳入search方法
中,以後在你的ajax請求中的data的json結構裏會發現data.search.value出現了filter的值(上面說過,在發送請求前打印下data的值你會有不少發現),因而參數的封裝與接收就
瓜熟蒂落了,返回數據渲染什麼的都不用動了注意變下你的sql語句就能夠了
常見搜索問題:
到這兒搜索彷佛結束了,然而還有一個問題,但你輸入了一個條件進行搜索後,你會發現即便你刷新頁面,所呈現的仍然是你上次
搜索時輸入的條件過濾後的結果,查看後臺發現此時的filter仍然還有值,不要慌張,也不要嘗試什麼param.filter = null,able.state.clear()之類的清除,沒有用,
只須要在你初始化表格時加入"stateSave":false,便可,由於dataTable會把這些狀態信息儲存到cookie中,把狀態保存設置爲false便可,固然你也能夠再加一個顯示所有的按鈕之類的........
總結:
1.屬性中的搜索開關要開啓,參數封裝
2.能夠設置某列searchable爲false
3.狀態保存
1.5排序
講完了分頁與搜索,接下來講說排序吧
我在網上找到的全是"單列排序",爲何這麼說呢,不少例子是初始化的時候是多列排序
然而你點擊某一列的排序後,其餘列的排序就失效了,即不一樣列的排序彷佛會相互影響這裏給出的是一個
"單列排序",還有我作兩列排序時目前仍然沒有解決的問題,但願有前輩能夠解答
1.5.1單列排序
初始化時加入如下屬性
1 "ordering":true,//排序總開關
2 "order":[[4,"desc"],[5,"desc"]], 3 "orderFixed":{ 4 "post": [[ 4, "desc" ],[5,"desc"]] 5 }, //固定排序,下面講
先忽略orderfixed(註釋掉),下面多列排序時會講,
此處order屬性指定第5,6列均降序排列,固然你也可使用table.order([4,"desc"],[5,"desc"]).draw();方法進行設置,
下面講如何封裝參數,還記得上面講搜索的時候參數如何封裝的嗎?對的,線索還在data裏面,可是你會發現data.order
中有列的索引(column)和升降序(dir),但咱們排序須要的是字段名啊,只有索引怎麼辦?貼下data裏的數據吧
data.columns.name屬性會幫助咱們的.
再次回到上面講columnDefs屬性時講到列有一個name屬性用來描述列,因而我上面的列寫成了這樣
name中既有索引,又有咱們須要的字段名,因此遍歷data.columns找到和data.order中重疊的列,拼裝排序參數
最後一步是爲了去除多餘的","
接下來又是發送請求,接收參數,返回數據渲染了,固然你要變的仍是你的sql若是你感受遍歷太麻煩,直接指定param.order也能夠
頁面渲染完成後大概就是這樣,能夠看到是降序,so問題來了,當你點擊某個排序列時,好比點擊發布時間這一列,你會變爲升序,但問題也來了,他的鄰居發佈板塊列的排序參數會變成
對的,這個列退出排序了,若是你的後臺打印了order的話,你會看到此時的order參數只有releaseTime asc,這也是我爲何說都是單列排序的緣由
(今天問了老師,獲得的答案是對啊就是這樣的點擊排序列其餘列退出排序...和我預期的不太同樣)
補充一點columnDefs屬性中還有有一個orderSequence和orderData屬性,用來設置排序的方向和排序的數據
1.5.2多列排序(建議跳過)
這個例子是我目前正在作的,相信上面的例子已經可以知足一個新手的須要,有點繞,可pass
我正在作的是一個多列排序:要實現這麼一個功能,即點擊排序列A時,排序列B不受影響,也就是保持以前的狀態參與排序
用到了orderFixed屬性,orderFixed屬性用來設置排序始終做用於表格,始終做用表明着當你點擊某個排序列時其他的列仍然參與排序
但也帶來了新的問題(目前還未解決),這個待會再說.
orderFixed內部有兩個屬性,pre和post,前者表明orderFixed的設置在排序前起做用,後者表明在排序發生後起做用,
什麼意思呢?假設你的order和orderFixed分別設置成如圖:
頁面渲染後如圖:
可見orderFixed設置的降序起了做用(雖然是升序的三角),可是當你點擊排序列的時候他不會顯示成升序,這是由於你的
orderFixed屬性內部設置成了pre,在排序前生效,貼下此時的data.order,顯然orderFixed的設置在前,
因此是orderFixed的排序方式生效
post與pre相反,表明以後
因此頁面是order設置的升序(在前面)起了效果:
好了,如今咱們使用orderFixed實現了這種支持點擊的多列排序,如今說說問題吧,咱們想要的多列排序是這樣一種:即點擊排序列A時排序列B的排序條件保持不變且仍然參與排序
初始化時的data.order,均爲降序
這樣設置帶來的問題以下:先點擊下第5列發佈時間,能夠看到第5列變成了升序,第6列依然保持降序
然而當你點擊第6列所在板塊時,第5列被改爲了降序!
彷佛兩者老是會相互影響...暫時未解決
補充一下單獨使用orderFixed也會遇到這種問題
總結:
1.排序總開關要打開
2.設置order對排序進行指定
3.能夠在列中使用orderable指定本列是否參與排序,orderSequence指定點擊時的排序方向
1.6用到的代碼
js
1 jQuery(function($) { 2 var oTable1 = $("#sample-table-2").DataTable({ 3 "language":{ 4 "sProcessing": "處理中...", 5 "sLengthMenu": "顯示 _MENU_ 項結果", 6 "sZeroRecords": "沒有匹配結果", 7 "sInfo":"顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", 8 "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項", 9 "sInfoFiltered": "(由 _MAX_ 項結果過濾)", 10 "sInfoPostFix": "", 11 "sSearch": "搜索:", 12 "sUrl": "", 13 "sEmptyTable":"表中數據爲空", 14 "sLoadingRecords": "載入中...", 15 "sInfoThousands": ",", 16 "oPaginate": { 17 "sFirst": "首頁", 18 "sPrevious": "上頁", 19 "sNext": "下頁", 20 "sLast": "末頁" 21 }, 22 "oAria": { 23 "sSortAscending": ": 以升序排列此列", 24 "sSortDescending": ": 以降序排列此列" 25 } 26 }, 27 "sPaginationType":"ellipses",//頁數過多時顯示..,需引入對應文件 28 "stateSave":false,//狀態保存(cookie裏),開啓會致使刷新後顯示上一次的內容 29 "autoWidth":false,//自動寬度 30 "aLengthMenu":[10,15,20,30,50], 31 "serverSide": true,//服務器模式,使用ajax必須開啓 32 "bPaginate": true,//分頁總開關 33 "pagingType":"full_numbers",//分頁樣式 34 "searchable":true,//搜索總開關 35 "ordering":true,//排序總開關 36 // "order":[[4,"desc"],[5,"desc"]], 37 "orderFixed":{ 38 "post": [[ 4, "desc" ],[5,"desc"]] 39 }, //固定排序,下面講 40 "bDestroy" : true, 41 "ajax":function(data,callback,settings) { 42 //參數封裝 43 var param = {}; 44 param.draw = data.draw; 45 param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候 46 param.start = data.start;//開始的記錄序號 47 param.page = (data.start / data.length)+1; 48 param.filter = data.search.value;//過濾條件 49 // alert(JSON.stringify(data)); 50 alert(JSON.stringify(data.order)) 51 //單排序條件 52 /* if(data.order) { 53 if(data.order[0].dir) { 54 param.order = "releaseTime" + " " + data.order[0].dir; 55 } 56 } */ 57 //多排序條件 58 param.order = " "; 59 if(data.order) { 60 $.each(data.order,function(index,value){ 61 var col = data.order[index].column; 62 $.each(data.columns,function(i,v) { 63 var name = data.columns[i].name; 64 if(name) { 65 if(col == window.parseInt(name)) { 66 var arr = name.split("_"); 67 param.order += arr[1] + " " + data.order[index].dir + ","; 68 } 69 } 70 }) 71 }) 72 } 73 param.order= param.order.substring(0,param.order.length-1); 74 $.ajax({ 75 type:"POST", 76 url:"${pageContext.request.contextPath}/newsController/getAllNews.action", 77 data:param, 78 cache:false, 79 dataType:"json", 80 success:function(result) { 81 var returnData = {}; 82 returnData.draw = result.draw;//這裏直接自行返回了draw計數器,應該由後臺返回 83 returnData.recordsTotal = result.recordsTotal;//返回數據所有記錄 84 returnData.recordsFiltered = result.recordsFiltered;//後臺不實現過濾功能，每次查詢均視做所有結果 85 //更改時間格式 86 for(var i=0;i<result.data.length; i++) { 87 result.data[i].releaseTime = new Date(result.data[i].releaseTime).toLocaleDateString(); 88 } 89 returnData.data = result.data;//返回的數據列表 90 //回調函數(數據渲染) 91 callback(returnData); 92 }, 93 error:function(ajax,textStatus) { 94 /* alert(JSON.stringify(ajax)); 95 alert(textStatus); */ 96 alert("未找到數據"); 97 } 98 }) 99 }, 100 "columnDefs": [ 101 { 102 "targets":[0], 103 "render": function(data, type, row, meta) { 104 return '<label><input type="checkbox" class="ace" /><span class="lbl"></span></label>'; 105 }, 106 "orderable":false, 107 "width":"50px" 108 }, 109 { 110 "title":"序號", 111 "name":"1_id", 112 "data":"id", 113 "targets":[1], 114 "width":"50px", 115 "orderable":false, 116 117 }, 118 { 119 "title":"新聞標題", 120 "name":"2_title", 121 "data":"title", 122 "targets":[2], 123 "render":function(data) { 124 if(data.length > 25) { 125 data = data.substring(0,25) + "..."; 126 } 127 return data; 128 }, 129 "orderable":false, 130 "width":"400px" 131 }, 132 133 { 134 "data":null, 135 "targets":[3], 136 "visible": false, 137 "searchable": false, 138 "orderable":false 139 }, 140 141 { 142 "title":"發佈時間", 143 "name":"4_releaseTime", 144 "data":"releaseTime", 145 "targets":[4], 146 "width":"300px", 147 "orderable":true, 148 // "orderSequence":["asc","desc"],//排序方向,第一次點擊升序,第二次點擊降序 149 // "orderData":[4,5],//第5列數據相同時安按照第6列數據進行排序 150 }, 151 { 152 "title":"所在板塊", 153 "name":"5_smallId", 154 "data":"menu.name", 155 "targets":[5], 156 "width":"300px", 157 "orderable":true, 158 "orderData":[5], 159 }, 160 { 161 "title":"操做", 162 "targets":[6], 163 "render":function(data,type,row,meta) { 164 var newsId = row.id; 165 //<a class="green" data-toggle="tooltip" data-placement="top" title="查看詳細" href="#"><i class="icon-pencil bigger-130"></i></a> 166 return '<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons"><a class="blue" data-toggle="tooltip" data-placement="top" title="查看詳細" href="#"><i class="icon-zoom-in bigger-130"></i></a> <a class="red" data-toggle="tooltip" data-placement="top" title="刪除" href="#"><i class="icon-trash bigger-130"></i></a></div><div class="visible-xs visible-sm hidden-md hidden-lg">'; 167 }, 168 "orderable":false, 169 "width":"200px" 170 } 171 ], 172 "infoCallback": function(settings,start,end,max,total,pre) { 173 //激活工具提示 174 $("[data-toggle='tooltip']").tooltip(); 175 //圖標功能 176 $("#sample-table-2 tbody").on( 'click', 'tr', function () { 177 var id = $(this).find("td").eq(1).text(); 178 if(id) { 179 $(".blue").attr("href","${pageContext.request.contextPath}/newsController/edit.action?id="+id); 180 } 181 }); 182 183 $(".red").click(function() { 184 $(this).parents("tr").find("td").eq(0).find(":checkbox").attr("checked",true); 185 var ids = new Array(); 186 //添加id到數組 187 $(":checkbox:checked").each(function(i) { 188 if($(this).parents("tr").find("td").eq(1).text()) { 189 ids[i] =$(this).parents("tr").find("td").eq(1).text(); 190 } 191 }) 192 if(window.confirm("肯定要刪除嗎?")) { 193 if(ids.length>0) { 194 $.ajax({ 195 type:"POST", 196 url:"${pageContext.request.contextPath}/newsController/hide.action", 197 data:{"ids":ids}, 198 traditional :true, 199 success:function(){ 200 window.location.reload(); 201 } 202 }) 203 } 204 205 } 206 }); 207 var api = this.api(); 208 var pageInfo = api.page.info(); 209 // alert(JSON.stringify(pageInfo)); 210 return "共"+pageInfo.pages +"頁,當前顯示"+ start + "到" + end + "條記錄" + ",共有"+ total + "條記錄"; 211 }, 212 "drawCallback": function(settings) { 213 //去除第一列排序圖標 214 // $("#th1").removeClass("sorting_asc"); 215 /* var th4 = $("#th4").attr("aria-sort"); 216 var th5 = $("#th5").attr("aria-sort"); 217 if(th4){ 218 if(th4 == "ascending") { 219 if($("#th4").hasClass("sorting_desc")){ 220 $("#th4").removeClass("sorting_desc"); 221 $("#th4").addClass("sorting_asc"); 222 } 223 }else { 224 if($("#th4").hasClass("sorting_asc")){ 225 $("#th4").removeClass("sorting_asc"); 226 $("#th4").addClass("sorting_desc"); 227 } 228 } 229 } 230 if(th5){ 231 if(th5 == "ascending") { 232 if($("#th5").hasClass("sorting_desc")){ 233 $("#th5").removeClass("sorting_desc"); 234 $("#th5").addClass("sorting_asc"); 235 } 236 }else { 237 if($("#th5").hasClass("sorting_asc")){ 238 $("#th5").removeClass("sorting_asc"); 239 $("#th5").addClass("sorting_desc"); 240 } 241 } 242 } */ 243 244 }, 245 }); 246 247 248 //搜索框樣式 249 //$("#sample-table-2_filter input[type='search']").val(""); 250 var search = "<div class='input-group'><input type='search' class='form-control input-sm' placeholder='標題檢索' aria-controls='sample-table-2'><div class='input-group-addon'><span class='glyphicon glyphicon-search' id='search'></span></div></div>"; 251 $("#sample-table-2_filter label").html(search); 252 $(".glyphicon-search").css("cursor","pointer"); 253 254 var table = $("#sample-table-2").DataTable(); 255 //table.columns.adjust(); 256 //table.order([4,"desc"],[5,"desc"]).draw(); 257 258 //過濾條件 259 $("#sample-table-2_filter #search").on("click", function () { 260 var filter = $(this).parents("div").find("input[type='search']").val(); 261 table.search(filter).draw(); 262 } ); 263 264 265 266 //監聽頁碼 267 /* $("#sample-table-2").on("page.dt",function() { 268 var tableSetings=$("#sample-table-2").dataTable().fnSettings(); 269 var length=tableSetings._iDisplayLength;//當前每頁顯示多少 270 var start=tableSetings._iDisplayStart;//當前頁開始 271 } ); */
controller
1 @RequestMapping("getAllNews") 2 public @ResponseBody Map<String,Object> getAllNews(int draw,int limit,int start,int page,String filter,String order) { 3 String hql = "select count(id)"; 4 String hql2 ="from News where status=1"; 5 if(filter != null && filter.trim().length() > 0) { 6 hql2 += "and title like '%" + filter+ "%'"; 7 } 8 hql += hql2; 9 if(order != null && order.trim().length() > 0) { 10 hql2 += "order by " + order; 11 } 12 int newsCount = newsService.getSize(hql,null); 13 //查詢 14 List<News> list = newsService.findByPages(limit,page,hql2); 15 print("filter-------" + filter); 16 print("order-----"+ order); 17 if(list != null && list.size() > 0) { 18 Map<String,Object> map = new HashMap<String,Object>(); 19 //總記錄數,必須 20 map.put("recordsTotal",newsCount); 21 //過濾後記錄數 22 map.put("recordsFiltered",newsCount); 23 map.put("data",list);//必須 24 map.put("draw",draw);//必須 25 return map; 26 }else { 27 return null; 28 } 29 }
bean
1 public class News { 2 private Integer id; 3 private String title; 4 private String content; 5 private Integer bigId; 6 private Integer smallId; 7 private Date releaseTime; 8 private Menu menu; 9 private Integer status = 1; 10 public Integer getId() { 11 return id; 12 } 13 public void setId(Integer id) { 14 this.id = id; 15 } 16 public String getTitle() { 17 return title; 18 } 19 public void setTitle(String title) { 20 this.title = title; 21 } 22 public String getContent() { 23 return content; 24 } 25 public void setContent(String content) { 26 this.content = content; 27 } 28 public Integer getBigId() { 29 return bigId; 30 } 31 public void setBigId(Integer bigId) { 32 this.bigId = bigId; 33 } 34 public Integer getSmallId() { 35 return smallId; 36 } 37 public void setSmallId(Integer smallId) { 38 this.smallId = smallId; 39 } 40 public Date getReleaseTime() { 41 return releaseTime; 42 } 43 public void setReleaseTime(Date releaseTime) { 44 this.releaseTime = releaseTime; 45 } 46 public Menu getMenu() { 47 return menu; 48 } 49 public void setMenu(Menu menu) { 50 this.menu = menu; 51 } 52 public Integer getStatus() { 53 return status; 54 } 55 public void setStatus(Integer status) { 56 this.status = status; 57 } 58 /*@Override 59 public String toString() { 60 return "News [id=" + id + ", title=" + title + ", content=" + content 61 + ", bigId=" + bigId + ", smallId=" + smallId 62 + ", releaseTime=" + releaseTime + ", menu=" + menu 63 + ", status=" + status + "]"; 64 }*/ 65 }
1.7參考文章
- 1. datatables使用服務器端分頁、排序、搜索功能(PHP)
- 2. Bootstrap-Datatables Java後臺分頁 批量刪除 自定義搜索
- 3. JS----dataTables分頁排序
- 4. MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分頁
- 5. thinkphp5 ajax搜索+分頁
- 6. thinkphp5 Ajax搜索分頁
- 7. ajax常見問題
- 8. Ajax常見問題
- 9. bootstrap table 分頁後,從新搜索的問題
- 10. AJAX常見面試問題
- 更多相關文章...
- • ADO 排序 - ADO 教程
- • PHP 實例 - AJAX 實時搜索 - PHP教程
- • PHP Ajax 跨域問題最佳解決方案
- • 算法總結-歸併排序
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用