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"},<pre class="javascript" name="code">					{ "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": '<i class="fa fa-coffee"></i> 正在加载数据...',  
	  	              			"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<list.length;i++){
	            				list[i].DT_RowId = list[i].id;
	            			}
	            			fnCallback(response);
	            		}else{
	            			alert(response.desp);
	            		}
	            	}
	            } );
    		}

<span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#example'</span><span class="pun">).</span><span class="pln">dataTable</span><span class="pun">(</span><span class="pln"> </span><span class="pun">{</span><span class="pln">   </span><span class="str">"aoColumns"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">       </span><span class="pun">{</span><span class="pln"> </span><span class="str">"mData"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"<span id="2_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="2_nwl" style="text-decoration: none;" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=19&is_app=0&jk=ef9c91b64f7becc7&k=engine&k0=engine&kdi0=0&luki=5&mcpm=0&n=10&p=baidu&q=55082150_cpr&rb=0&rs=1&seller_id=1&sid=c7ec7b4fb6919cef&ssp2=1&stid=0&t=tpclicked3_hc&td=1933315&tu=u1933315&u=http%3A%2F%2Fwww%2E4byte%2Ecn%2Fquestion%2F6982%2Fhow%2Dto%2Duse%2Dfnserverdata%2Ehtml&urlid=0" target="_blank" mpid="2"><span style="width: auto; height: auto; color: rgb(0, 0, 255); font-size: 90%; float: none;"><span style="font-size:12px;">engine</span></span></a></span>"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">       </span><span class="pun">{</span><span class="pln"> </span><span class="str">"mData"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"browser"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">       </span><span class="pun">{</span><span class="pln"> </span><span class="str">"mData"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"platform.inner"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">       </span><span class="pun">{</span><span class="pln"> </span><span class="str">"mData"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"platform.details.0"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">       </span><span class="pun">{</span><span class="pln"> </span><span class="str">"mData"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"platform.details.1"</span><span class="pln"> </span><span class="pun">}</span><span class="pln">     </span><span class="pun">]</span><span class="pln">   </span><span class="pun">}),</span><span class="pln">   </span><span class="str">"bProcessing"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">   </span><span class="str">"bServerSide"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">   </span><span class="str">"sAjaxSource"</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">,</span><span class="pln">   </span><span class="str">"fnServerData"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> sSource</span><span class="pun">,</span><span class="pln"> aoData</span><span class="pun">,</span><span class="pln"> fnCallback</span><span class="pun">,</span><span class="pln"> oSettings </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">     oSettings</span><span class="pun">.</span><span class="pln">jqXHR </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln"><span id="1_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="1_nwl" style="text-decoration: none;" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=19&is_app=0&jk=ef9c91b64f7becc7&k=ajax&k0=ajax&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=55082150_cpr&rb=0&rs=1&seller_id=1&sid=c7ec7b4fb6919cef&ssp2=1&stid=0&t=tpclicked3_hc&td=1933315&tu=u1933315&u=http%3A%2F%2Fwww%2E4byte%2Ecn%2Fquestion%2F6982%2Fhow%2Dto%2Duse%2Dfnserverdata%2Ehtml&urlid=0" target="_blank" mpid="1"><span style="width: auto; height: auto; color: rgb(0, 0, 255); font-size: 90%; float: none;"><span style="font-size:12px;">ajax</span></span></a></span></span><span class="pun">(</span><span class="pln"> </span><span class="pun">{</span><span class="pln">       </span><span class="str">"dataType"</span><span class="pun">:</span><span class="pln"> </span><span class="str">'json'</span><span class="pun">,</span><span class="pln">       </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"POST"</span><span class="pun">,</span><span class="pln">       </span><span class="str">"url"</span><span class="pun">:</span><span class="pln"> sSource</span><span class="pun">,</span><span class="pln">       </span><span class="str">"<span id="0_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="0_nwl" style="text-decoration: none;" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=19&is_app=0&jk=ef9c91b64f7becc7&k=data&k0=data&kdi0=0&luki=6&mcpm=0&n=10&p=baidu&q=55082150_cpr&rb=0&rs=1&seller_id=1&sid=c7ec7b4fb6919cef&ssp2=1&stid=0&t=tpclicked3_hc&td=1933315&tu=u1933315&u=http%3A%2F%2Fwww%2E4byte%2Ecn%2Fquestion%2F6982%2Fhow%2Dto%2Duse%2Dfnserverdata%2Ehtml&urlid=0" target="_blank" mpid="0"><span style="width: auto; height: auto; color: rgb(0, 0, 255); font-size: 90%; float: none;"><span style="font-size:12px;">data</span></span></a></span>"</span><span class="pun">:</span><span class="pln"> aoData</span><span class="pun">,</span><span class="pln">       </span><span class="str">"success"</span><span class="pun">:</span><span class="pln"> fnCallback</span><span class="pun">,</span><span class="pln">       </span><span class="str">"error"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">           console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">message</span><span class="pun">);</span><span class="pln">       </span><span class="pun">}</span><span class="pln">     </span><span class="pun">});</span><span class="pln">   </span><span class="pun">}</span><span class="pln"> </span><span class="pun">});</span><span class="pln"></span><span class="pun">});</span>

<span class="pun">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中填充数据。</span>