datatable 前台和后台数据格式

Posted 2020-09-23 cxchanpin

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