Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，即使搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。 这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，我想加入自己的控件放在l的后面……这些太多了，那么下面就给大家介绍怎么去使用dom属性配置已经自定义。

上面我已经用了一些英文字母标注在每个控件的后面，开始看肯定会有些疑惑，或者不熟悉，不要着急，我来告诉大家这些到底是什么

作者为了适应我们所说的这些情况，已经考虑到了，所以有这么强大的dom属性。那么作者定义了如下字母：

  • l - Length changing 改变每页显示多少条数据的控件
  • f - Filtering input 即时搜索框控件
  • t - The Table 表格本身
  • i - Information 表格相关信息控件
  • p - Pagination 分页控件
  • r - pRocessing 加载等待显示信息
  • < > - div elements 代表一个div元素 <div><div>
  • <"#id" > - div with an id 指定了id的div元素 <div id='id'><div>
  • <"class" > - div with a class 指定了样式名的div元素 <div class='class'><div>
  • <"#id.class" > - div with an id and class 指定了id和样式的div元素 <div id='id' class='class'><div>

这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。



现在给大家我的例子

datatables中文手册 datatables sdom_位置修改 dom datatables

具体源码见下面

我主要介绍javascript

var table = $("#GMSmodelLabour").dataTable({
"dom":'t<"bottom"ilp><"clear">',//这句话的意思呢就是把 t(指的就是表格实体，就是tr th )
放在ilp的前面，由于有<"bottom">，就是放在换行放到t的下面
而ilp呢就是指这3个都在最下的家伙的排队顺序
i（"bInfo" : true,//页脚信息显示）在最前面
l（"bLengthChange" : true,//分页条数选择按钮；这个就是的例子的核心，我改变了他的位置）在i的后面
p（"bPaginate":true, 分页的控件，这里主要对应的是"oPaginate" :这个）排最后
（所有控件的默认样式都将不变，只是位置发生调整）"bPaginate":true,
"scrollX" : true, //左右滚动条
"ordering" : false,//thead上的排序按钮
"bLengthChange" : true,//分页条数选择按钮
"bProcessing" : true,//显示加载中
"bInfo" : true,//页脚信息显示
"searching" : false,//搜索输入框显示
"sPaginationType" : "full_numbers",//分页显示样式
"paging" : true,
"sAjaxSource" : '${cp}/gms/modelLabour/ajaxList.do',
"bProcessing" : true,
"bServerSide" : true,
"oLanguage" : {
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "没有找到符合条件的数据",
"sProcessing" : "正在加载数据...",
"sInfo" : "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
"sInfoEmpty" : "没有记录",
"sInfoFiltered" : "(从 _MAX_ 条记录中过滤)",
"sSearch" : "搜索：",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "<<",
"sNext" : ">>",
"sLast" : "尾页"
}
},
"aoColumns" : [ {
"sDefaultContent" : "",
'sClass' : 'left'
},
{
"mRender" : function(data, type,full) {
return "<input type=\"checkbox\" json='{\"modelLabourCode\":\""+full.modelLabourCode+"\"}'  class=\"checkRepairItem checkTr\" οnclick=\"judgeGmsToolTypeChecked();\"/>";
},
"sClass" : "center",
"mData" : null,
"sDefaultContent" : ""
},
{
"sDefaultContent" : "",
'sClass' : 'center',
"mData" : null,
"mRender" : function(data, type, full) {
var id = full.modelLabourCode;
var edit = "<a href=\"javascript:void(0);\"class=\"open_small_window\" window_id=\"modelLabour_window_id\" save_id=\"save_modelLabour\" window_url=\"${cp}/gms/modelLabour/edit.do?" 
+ "modelLabourCode="
+ id
+ "\">编辑</a>";
var del = "<a href=\"javascript:void(0);\" οnclick=\"delMainLabour('"+id+"')\">删除</a>"
if($("#model_labour_del_param").val()!=1){
del = "<a class='disabled'>删除</a>";
} 
if($("#model_labour_edit_param").val()!=1){
edit = "<a class='disabled'>编辑</a>";
} 
return edit+del;
}
},{
"mData" : "modelLabourCode",
'sClass' : 'left'
}, {
"mData" : "modelLabourName",
'sClass' : 'left '
}, {
"mData" : "syncStatus",
'sClass' : 'left syncStatus'
}],
"bLengthChange" : true,// 控制每页显示记录数
"iDisplayLength" : CONSTANT.PAGE_SIZE, // 每页显示数量
"fnServerData" :
function(sSource, aoData, fnCallback) {
$.ajax({
"type" : 'post',
"url" :sSource,
"dataType" : "json",
"async" :true,
"data" : {
aoData :JSON.stringify(aoData),
searchData :JSON.stringify(searchData)
},
"success" :function(resp) {
resultData=resp;
fnCallback(resp);
},
error :function(resp) {
$("#dealerSearchFrom").parents().remove();
openDialog("操作发生异常，请稍后重试");
//remove_loading();
}
});
},
"fnRowCallback" :function(nRow, aData, iDisplayIndex) {
// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格，此处用于显示‘表格序号’ 
var oSettings = table.fnSettings();
      var startIndex = oSettings._iDisplayStart;
$('td:eq(0)', nRow).html(startIndex + iDisplayIndex + 1);
return nRow;
},
"fnDrawCallback" :function() {
$(".left").each(function() {
if ($(this).html() =='null') {
$(this).html('');
}
});
$(".syncStatus").each(function(){
var statusCode = $(this).html();
var statusDesc = isMap[statusCode];
$(this).html(statusDesc);
});//datatables给我们提供的位置调整方法只能大致定位，接下来我们要微调下，微调其实很简单，用position设置relative样式来进 //行调整就好了，然后用jQuery的addClass方法就可以了
$("#GMSmodelLabour_length").addClass("toCentre");//GMSmodelLabour_length 是datatables自动给控件l（"bLengthChange" : true,//分页条数选择按钮；这个就是的例子的核心，我改变了他的位置）生成的id，大家可以在页面上用google查看elements查看他
} 
}); 
modelLabour_table = table;
});//这是微调的CSS样式
<style type="text/css">
.toCentre{
position:relative;
top:9px;
left:20px;  
}
 </style>