datatable 前臺和後臺數據格式
阿新 • • 發佈:2017-06-21
ray arc rtc [] isp tracking 後臺 values pan
datatable是很強大的前臺表格插件,前臺定義好表格格式後,後臺須要返回指定格式的json數據!
例如以下:
首先是js的定義:
var oTable = $('#sample_editable_1').dataTable({ "aLengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], "bProcessing": true, "bServerSide":true, "sServerMethod":"post", "sAjaxSource":"http://localhost:8080/pets/pets2/test.action", "iDisplayLength": 5, "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "bPaginite":false, "oLanguage": { "sLengthMenu": "_MENU_ records per page", "oPaginate": { "sPrevious": "前一頁", "sNext": "Next" } }, "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] } ], "aoColumns":[ { "sTitle": "username", "fnRender":function(data){ return data.aData[0]; } }, { "sTitle": "郵編" }, { "sTitle": "郵編1" }, { "sTitle": "郵編2" }, { "sTitle": "郵編5", "fnRender":function(data){
<span style="white-space:pre"> </span>//這裏能夠自己定義表格每一列數據的格式 return '<a class="edit" href="javascript:;">'+data.aData[4]+'</a>'; } }, { "sTitle": "地址", "fnRender":function(data){ return '<a class="delete" href="javascript:;">'+data.aData[5]+'</a>'; } } ]
<pre name="code" class="java"> import java.io.Serializable; import java.util.ArrayList; import java.util.List; public class DataTabseTestJson implements Serializable { private static final long serialVersionUID = 1L; private int sEcho;//參數值是不變的 private int iTotalRecords = 100; private int iTotalDisplayRecords = 100; private String[][] aaData;//返回的數據 private int iColumns; private boolean bRegex; // private boolean bRegex_0; // private boolean bRegex_1; // private boolean bRegex_2; // private boolean bRegex_3; // private boolean bRegex_4; // private boolean bSearchable_0; // private boolean bSearchable_1; // private boolean bSearchable_2; // private boolean bSearchable_3; // private boolean bSearchable_4; // private boolean bSortable_0; // private boolean bSortable_1; // private boolean bSortable_2; // private boolean bSortable_3; // private boolean bSortable_4; private int iDisplayLength; private int iDisplayStart; // private int iSortCol_0; private int iSortingCols; private String sColumns;// platform,version,engine,browser,grade private int sSearch; }
get,set方法就省略了!
datatable 前臺和後臺數據格式