JQuery Datatables 控件的搜索框/显示分页的样式,有滚动条保持固定

     使用了JQuery datatables的表格控件,但发现表格的列名太多了,会有滚动条,导致搜索框和显示的分页都随着滚动条一起右移了,这样不太人性化,所以需要重新设置这些插件的样式,参考如下内容:

      

$(document).ready(function()
 {
    $('#example').dataTable({
    "sDom":'<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>'
    });
});
 
//自定义布局
//* 
 l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class    * Examples: <"wrapper"flipt>, <lf<t>ip>
 
//语法结构
/*
    <>
 表示一个闭合DIV
    例：<>
 = <div></div>
     
    <"类名称">
 表示一个带类名称的闭合DIV
    例：<"top">
 = <div class="top"></div>
     
    l
 - 每行显示的记录数
    f
 - 搜索框
    t
 - 表格
    i
 - 表格信息
    p
 - 分页条
    r
 - 加载时的进度条
*/
 
//综合应用
/*
    例：<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>
    表示
    <div
 class="top">
        表格信息(i)
        搜索框(f)
        每行显示的记录数(l)
        分页条(p)
        <div
 class="clear"></div>
    </div>
    加载时的进度条(bottom)
    表格(t)
    <div
 class="top">
        表格信息(i)
        每行显示的记录数(l)
        分页条(p)
        <div
 class="clear"></div>
    </div>
*/

            为了实现上述,滚动时候,固定分页控件不动,在css中可以增加属性为postion:absolute,保持不动,如下代码:

.float_right_res {
	min-height: 20px !important;
	position:absolute;
	top:150px;  //设置相对于父级的高度,以便于插件可以调整高度
	bottom:20px;
	padding-left: 65%;
}
.float_right_display {
	min-height: 20px !important;
	position:absolute;  //固定控件,防止随着滚动条一起滚动
	padding-left: 58%;//占据屏幕的58%
	padding-right: 15px;
	padding-top: 10px;
}