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

来源：互联网发布：ubuntu xrandr 编辑：程序博客网时间：2024/05/22 08:12

使用了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;}

0 0