datatable 前台和后台数据格式

清疚 2022-08-27 14:54 196阅读 0赞

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方法就省略了！