一种基于json数据的dataTable生成方式

1.数据格式

/*
**数据结构（包括表头和数据的Json结构）
**这样定义数据的好处就是只需要规定columns中表头的个数和顺序就可以了，数据的数量和顺序不受限制
**可以注意到data中每一个对象其实有6条数据，但由于表头只定了4个，所以html渲染出来的表格也就只有4列，另外data中每个对象里边的数据也不必按照name,position,salary,office的顺序排列，如roomInfoData.data[0]所示
*/
var tableData= {
	"columns": [
        { "data": 'name',"title": "name", "class": "center" },
        { "data": 'position',"title": "position", "class": "center" },
        { "data": 'salary',"title": "salary", "class": "center" },
        { "data": 'office',"title": "office", "class": "center" }
    ],
    "data":[
	    {
	        
	        "position":   "System Architect",
	        "salary":     "$3,120",
	        "start_date": "2011/04/25",
	        "office":     "Edinburgh",
	        "extn":       "5421",
	        "name":       "Tiger Nixon",
	    },
	    {
	        "name":       "Garrett Winters",
	        "position":   "Director",
	        "salary":     "$5,300",
	        "start_date": "2011/07/25",
	        "office":     "Edinburgh",
	        "extn":       "8422"
	    }
	]
}

2.生成表格函数

function buildTable(obj,data){
        $('#'+obj).empty();
    	$('#'+obj).dataTable({
            'bDestroy' : true,                    
            'bLengthChange' : false,
            'bPaginate' : true,                  //是否分页
            'sPaginationType' : 'full_numbers',
            'iDisplayLength' : 6,                 //显示数据条数
            'bInfo' : true,                       //数据查找状态，没数据会显示“没有数据”
            'bAutoWidth' : true,                  //自动宽度
            'bSort' : false,                      //是否排序
            'bFilter' : false,                    //过滤功能
            'bProcessing':false,                 
            'oLanguage' : {                       //中文化分页标签
              "sSearch" : "快速查找:",
              "sInfo" : "显示 _START_ 至 _END_ 条信息/共 _TOTAL_ 条",
              "sZeroRecords" : "没有检索到数据",
              "sLengthMenu": "每页显示 _MENU_ 条记录",
              "sInfoEmpty": "没有数据",
                        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
              'oPaginate' : {
                'sNext' : '下一页',
                'sLast' : null,
                'sFirst' : null,
                'sPrevious' : '上一页'
              }
            },
            "data":data.data,                    //数据
            "columns": data.columns,             //表头
          });    
}

3.页面调用

<table id="roomInfo"></table>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/DataTables/jquery.dataTables.js"></script>
<script type="text/javascript">
   buildTable("roomInfo",tableData);	
</script>

 

转载于:https://my.oschina.net/u/3481089/blog/898417