Bootstrap的Datatable详解

$('#scenerytable').dataTable({
            	"sDom": "<'row'<'col-md-6 col-sm-12'l><'col-md-12 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
                "bProcessing": true,//显示正在处理
                "bServerSide": true,//延迟加载
                "bPaginate": true,//显示（使用）分页器
                "bFilter": false,//是否启用客户端过滤功能
                "bAutoWidth": false,//自动计算表格各列宽度
                "bLengthChange": false,//显示一个每页长度的选择条（需要分页器支持）
                "aaSorting": [[8, "desc"],[7, "asc"]],//指定按多列数据排序的依据
                "sAjaxSource": "../scenery/list",//指定要从哪个URL获取数据
  	            "fnServerData": retrieveData,//用于替换默认发到服务端的请求操作
                "iDisplayLength": 10,//用于指定一屏显示的条数，需开启分页器
                "sPaginationType": "bootstrap",//用于指定分页器风格
                "aoColumns": [
    	              			{ "mData": "name"},
    	              			{ "mData": "level"},
    	              			{ "mData": "address"},
    	              			{ "mData": "gps"},
    	              			{ "mData": "cost"},
					{ "mData": function( source, type, val ){
    	              				switch (source.isImage) {
									case '1':
										return "有图";
										break;
									case '0':
										return "无图";
										break;
									}
    	              			}},
 
  
					"aoColumnDefs": [//给每个单独的列设置不同的填充，或者使用aoColumns也行
				                    { "bSortable": false, "aTargets": [0,1,2,3,4,5,6,9] },{
				                    	"sDefaultContent" : '',
								        "aTargets" : [ '_all' ]
				                    }

                    			],
                			"oLanguage": {//语言设置
	                  			"sLengthMenu": "每页显示 _MENU_ 条记录",   
	  	              			"sZeroRecords": "没有检索到数据",   
	  	             			"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",   
	  	              			"sInfoEmtpy": "没有数据",   
	  	              			"sProcessing": ' 正在加载数据...',  
	  	              			"oPaginate": {   
	  	              			    "sFirst": "首页",   
	  	              			    "sPrevious": "前一页",   
	  	              			    "sNext": "后一页",   
	  	              			    "sLast": "尾页"  
	  	            			  }
               				 }
          		  });
 
  
//数据获取函数
            function retrieveData( sSource, aoData, fnCallback, oSettings ) {
            	aoData.push( { "name": "pageNumber", "value": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ) });
            	aoData.push( { "name": $("#scontent").attr("name"), "value": $("#scontent").val() });
            	console.log("sSource====>"+sSource);
            	
            	$.ajax( {
	            	"dataType": 'json',
	            	"type": "POST",
	            	"contentType": "application/json",
	            	"url": sSource,
	            	"data": JSON.stringify(aoData),
	            	"cache": false,
	            	"success" :function(response) {
	            		if(response != null && response.aaData != null){
	            			var list = response.aaData;
	            			for(var i=0;i
 
  

 
  

 
  

 
  

 
  
$(document).ready( function() {
 $('#example').dataTable( {
   "aoColumns": [
       { "mData": "engine" },
       { "mData": "browser" },
       { "mData": "platform.inner" },
       { "mData": "platform.details.0" },
       { "mData": "platform.details.1" }
     ]
   }),
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": url,
   "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
     oSettings.jqXHR = $.ajax( {
       "dataType": 'json',
       "type": "POST",
       "url": sSource,
       "data": aoData,
       "success": fnCallback,
       "error": function (e) {
           console.log(e.message);
       }
     });
   }
 });
});
 
  
sSource,fnCallback oSettings是由datatable中生成的。

sSource ajax调用的url。当你初始化数据表指定这sAjaxSource。所以你应该在你的url作为sAjaxSource var。

oSettings由datatable js创建和维护。它存储重要数据表的状态信息。详细的文档:https://datatables.net/docs/DataTables/1.9.0/DataTable.models.oSettings.html

然而,我认为你的成功函数是不必要的。在初始化期间你应该指定aoColumns作为一个选项,然后datatable中填充数据。