JQuery Datatable sDom 配置

最新推荐文章于 2023-12-18 13:41:39 发布

fhqqhf

最新推荐文章于 2023-12-18 13:41:39 发布

阅读量648

点赞数

分类专栏： WEB UI JQuery Datatable 文章标签： javascript ViewUI

JQuery 同时被 3 个专栏收录

5 篇文章

订阅专栏

WEB UI

4 篇文章

订阅专栏

Datatable

1 篇文章

订阅专栏

本文详细解析了JQuery Datatable插件中的sDom属性，解释了如何通过该属性来精确控制表格中各元素的位置，包括长度改变、过滤输入、表格本身、信息展示、分页等功能的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用过JQuery Datatable的人都知道，他很强大，也很简单，但是有一个属性的设定总是很模糊，他就是sDom.

官网给的描述是：

This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:

The following options are allowed:
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
The following constants are allowed:
'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
The following syntax is expected:
'<' and '>' - div elements
'<"class" and '>' - div with a class
'<"#id" and '>' - div with an ID

拿个例子来看：

"sDom": "<t<'span12 center'p>>",

分解一下就是：

<t<'span12 center'p>>

最后的HTML就是：

<div>

   <table>表格内容</table>

   <div class="span12 center">
       <div>分页栏</div>
   </div>

<div>

页面显示如图:

清楚了这个逻辑就感觉简单多了。