datablesはjsonデータと改ページを充填します.
5526 ワード
会社には先端がないので、何でも自分でやります.前のページを分けて前後の組み合わせでやりたいですが、コードの量がちょっと大きいので、自分も怠けています.表もdatablesが持参しています.下のHTMLコードにCSSとjsのリンクがあります.
使用するURL:公式のdatablesマニュアルのURLhttp://www.datatables.club/manual/ ajaxでバックグラウンドを要求する例URLについて:https://datatables.net/manual/ajax 公式サイト:中国語公式サイト:http://datatables.club/
いくつかのいい感じのブログを探しました. http://blog.csdn.net/u011072139/article/details/54312414
http://blog.csdn.net/kangguowei/article/details/72847827
http://blog.csdn.net/j7fs/article/details/77453409
http://blog.csdn.net/kangguowei/article/details/72847827
公式の良い例を示しています.http://www.datatables.club/blog/2016/01/28/user-share-nbh1991.html
第1歩:慣例は先に図に行って、ピクチャーの上で一部の内容はあいまいな処理を行いました.
ステップ2:上のコード
①HTMLの書き方は、jsを含む
使用するURL:公式のdatablesマニュアルのURLhttp://www.datatables.club/manual/ ajaxでバックグラウンドを要求する例URLについて:https://datatables.net/manual/ajax 公式サイト:中国語公式サイト:http://datatables.club/
いくつかのいい感じのブログを探しました. http://blog.csdn.net/u011072139/article/details/54312414
http://blog.csdn.net/kangguowei/article/details/72847827
http://blog.csdn.net/j7fs/article/details/77453409
http://blog.csdn.net/kangguowei/article/details/72847827
公式の良い例を示しています.http://www.datatables.club/blog/2016/01/28/user-share-nbh1991.html
第1歩:慣例は先に図に行って、ピクチャーの上で一部の内容はあいまいな処理を行いました.
ステップ2:上のコード
①HTMLの書き方は、jsを含む
$(document).ready(function() {
$('#example').DataTable( {
"serverSide": true,
searching: true,
lengthChange: true,
paging: true,
scrollCollapse: true,
serverSide: false,
search: true,
processing: true,
/* scrollY: 500, */
scrollX: "100%",
scrollXInner: "100%",
scrollCollapse: true,
jQueryUI: false,
autoWidth: true,
autoSearch: false,
language: {
"sProcessing": " ...",
"sLengthMenu": " _MENU_ ",
"sZeroRecords": " ",
"sInfo": " _START_ _END_ ， _TOTAL_ ",
"sInfoEmpty": " 0 0 ， 0 ",
"sInfoFiltered": "( _MAX_ )",
"sInfoPostFix": "",
"sSearch": " :",
"sUrl": "",
"sEmptyTable": " ",
"sLoadingRecords": " ...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": " ",
"sPrevious": " ",
"sNext": " ",
"sLast": " "
},
"oAria": {
"sSortAscending": ": ",
"sSortDescending": ": "
}
},
ajax: {
url: "/resume/queryList",
dataSrc: ''
},
"columns": [
{ "data": "gender" },
{ "data": "age" },
{ "data": "education_bachelor" },
{ "data": "work" },
{ "data": "work_experience" },
{ "data": "web_id" },
{ "data": "resume_from" },
{ "data": "update_time" },
{ data: "location",
render : function(data,type, full, meta) {
return "<a href="+data+"> </a>";
}
}
]
} );
} );
WEB_ID
WEB_ID
② controller
/**
* @desc
*/
@ResponseBody
@RequestMapping(value="/queryList",method = RequestMethod.GET)
public List queryResumeList(){
List list=resumService.queryResumeList();
/*request.setAttribute("list", list);*/
return list;
}
③ json
，datatables ， ！！！！！
・