基本初始化
零配置 功能启用/禁用 默认排序 多列排序 多个表格 隐藏列 复杂表头 DOM定位 表格自适应 保存状态 不同的分页样式 垂直滚动条 垂直滚动条,动态高度 水平滚动条 水平和垂直滚动条

DataTables 基本初始化

官网 中文网

DOM定位

代码: <"wrapper"flipt>

相当于以下DOM结构:

<div class="wrapper">
    { filter }
    { length }
    { info }
    { paging }
    { table }
</div>

代码: <lf<t>ip>

相当于以下DOM结构:

<div>
    { length }
    { filter }
    <div>
        { table }
    </div>
    { info }
    { paging }
</div>
姓名 职位 工作地点 年龄 入职时间 年薪
姓名 职位 工作地点 年龄 入职时间 年薪
李霞 系统架构师 北京 61 2011/04/25 ¥320,800
杜重治 会计 上海 63 2011/07/25 ¥170,750
陈锋 初级开发者 深圳 66 2009/01/12 ¥86,000
郑伯宁 高级JavaScript开发者 北京 22 2012/03/29 ¥433,060
施华军 会计 上海 33 2008/11/28 ¥162,700
吴书振 集成专家 南京 61 2012/12/02 ¥372,000
张宁 销售代表 深圳 59 2012/08/06 ¥137,500
马世波 集成专家 上海 55 2010/10/14 ¥327,900
张章 Javascript开发者 深圳 39 2009/09/15 ¥205,500
张竹影 软件工程师 北京 23 2008/12/13 ¥103,600
韩庆福 办公室主管 广州 30 2008/12/19 ¥90,560
刘勇 客户服务 北京 22 2013/03/03 ¥342,000
张忆湫 大区经理 深圳 36 2008/10/16 ¥470,600
尚志兴 高级营销设计师 广州 43 2012/12/18 ¥313,500
杜若芳 大区经理 广州 19 2010/03/17 ¥385,750
杨乔松 营销设计师 广州 66 2012/11/27 ¥198,500
闫跃进 CEO 南京 64 2010/06/09 ¥725,000
孙凯 系统管理员 南京 59 2009/04/10 ¥237,500
赖祥校 软件工程师 广州 41 2012/10/13 ¥132,000
郭晖 人事主管 北京 35 2012/09/26 ¥217,500
贺光明 技术主管 南京 30 2011/09/03 ¥345,000
邓小燕 CMO 南京 40 2009/06/25 ¥675,000
白莉惠 售前支持 南京 21 2011/12/12 ¥106,450
杨海霞 销售代表 成都 23 2010/09/20 ¥85,600
利旭日 CEO 广州 47 2009/10/09 ¥1,200,000
范永胜 开发者 北京 42 2010/12/22 ¥92,575
于怀斌 大区经理 苏州 28 2010/11/14 ¥357,650
赵淑娜 软件工程师 深圳 28 2011/06/07 ¥206,850
张淑杰 COO 深圳 48 2010/03/11 ¥850,000
陈俊军 区域销售 上海 20 2011/08/14 ¥163,000
郭增杰 集成专家 成都 37 2011/06/02 ¥95,400
林云 开发者 广州 53 2009/10/22 ¥114,500
郭述龙 技术作者 广州 27 2011/05/07 ¥145,000
杨军 团队主管 深圳 22 2008/10/26 ¥235,500
张海龙 售后支持 北京 46 2011/03/09 ¥324,050
耿静 营销设计师 深圳 47 2009/12/09 ¥85,675
刘晋荣 办公室主管 深圳 51 2008/12/16 ¥164,500
孙宁 秘书 深圳 41 2010/02/12 ¥109,850
邢洪锐 财务总监 深圳 62 2009/02/14 ¥452,500
陈云云 办公室主管 广州 37 2008/12/11 ¥136,200
张禄 主任 南京 65 2008/09/26 ¥645,750
王增凤 技术支持工程师 苏州 64 2011/02/03 ¥234,500
沈捷 软件工程师 广州 38 2011/05/03 ¥163,500
汪化言 技术支持工程师 上海 37 2009/08/19 ¥139,575
杨正机 开发者 南京 61 2013/08/11 ¥98,540
戴向军 技术支持工程师 深圳 47 2009/07/07 ¥87,500
王延芳 数据分析工程师 苏州 64 2012/04/09 ¥138,575
沈健 软件工程师 南京 63 2010/01/04 ¥125,250
刘伟峰 软件工程师 深圳 56 2012/06/01 ¥115,000
陆先生 初级Javascript开发者 北京 43 2013/02/01 ¥75,650
纪虹羽 销售代表 南京 46 2011/12/06 ¥145,600
肖艳 大区经理 广州 47 2011/03/21 ¥356,250
沈国金 系统管理员 广州 21 2009/02/27 ¥103,500
王燕峰 开发者 深圳 30 2010/07/14 ¥86,500
徐若琳 大区经理 北京 51 2008/11/13 ¥183,000
徐成业 Javascript开发者 苏州 29 2011/06/27 ¥183,000
李岸白 客户服务 南京 27 2011/01/25 ¥112,000 
data-plugin="dataTable" data-dom="<&quot;top&quot;i>rt<&quot;bottom&quot;flp><&quot;clear&quot;>"
$(function () {
    $('#dataTableExample').DataTable($.concatCpt('dataTable', {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
    }));
});
<table class="table table-bordered table-hover dataTable table-striped w-full my-15 text-nowrap" id="dataTableExample" data-plugin="dataTable"  data-dom="<&quot;top&quot;i>rt<&quot;bottom&quot;flp><&quot;clear&quot;>">
    <thead>
    <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>工作地点</th>
        <th>年龄</th>
        <th>入职时间</th>
        <th>年薪</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>工作地点</th>
        <th>年龄</th>
        <th>入职时间</th>
        <th>年薪</th>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>李霞</td>
        <td>系统架构师</td>
        <td>北京</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>&yen;320,800</td>
    </tr>
    <tr>
        <td>杜重治</td>
        <td>会计</td>
        <td>上海</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>&yen;170,750</td>
    </tr>
    <tr>
        <td>陈锋</td>
        <td>初级开发者</td>
        <td>深圳</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>&yen;86,000</td>
    </tr>
    <tr>
        <td>郑伯宁</td>
        <td>高级JavaScript开发者</td>
        <td>北京</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>&yen;433,060</td>
    </tr>
    <tr>
        <td>施华军</td>
        <td>会计</td>
        <td>上海</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>&yen;162,700</td>
    </tr>
    <tr>
        <td>吴书振</td>
        <td>集成专家</td>
        <td>南京</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>&yen;372,000</td>
    </tr>
    <tr>
        <td>张宁</td>
        <td>销售代表</td>
        <td>深圳</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>&yen;137,500</td>
    </tr>
    <tr>
        <td>马世波</td>
        <td>集成专家</td>
        <td>上海</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>&yen;327,900</td>
    </tr>
    <tr>
        <td>张章</td>
        <td>Javascript开发者</td>
        <td>深圳</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>&yen;205,500</td>
    </tr>
    <tr>
        <td>张竹影</td>
        <td>软件工程师</td>
        <td>北京</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>&yen;103,600</td>
    </tr>
    <tr>
        <td>韩庆福</td>
        <td>办公室主管</td>
        <td>广州</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>&yen;90,560</td>
    </tr>
    <tr>
        <td>刘勇</td>
        <td>客户服务</td>
        <td>北京</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>&yen;342,000</td>
    </tr>
    <tr>
        <td>张忆湫</td>
        <td>大区经理</td>
        <td>深圳</td>
        <td>36</td>
        <td>2008/10/16</td>
        <td>&yen;470,600</td>
    </tr>
    <tr>
        <td>尚志兴</td>
        <td>高级营销设计师</td>
        <td>广州</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>&yen;313,500</td>
    </tr>
    <tr>
        <td>杜若芳</td>
        <td>大区经理</td>
        <td>广州</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>&yen;385,750</td>
    </tr>
    <tr>
        <td>杨乔松</td>
        <td>营销设计师</td>
        <td>广州</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>&yen;198,500</td>
    </tr>
    <tr>
        <td>闫跃进</td>
        <td>CEO</td>
        <td>南京</td>
        <td>64</td>
        <td>2010/06/09</td>
        <td>&yen;725,000</td>
    </tr>
    <tr>
        <td>孙凯</td>
        <td>系统管理员</td>
        <td>南京</td>
        <td>59</td>
        <td>2009/04/10</td>
        <td>&yen;237,500</td>
    </tr>
    <tr>
        <td>赖祥校</td>
        <td>软件工程师</td>
        <td>广州</td>
        <td>41</td>
        <td>2012/10/13</td>
        <td>&yen;132,000</td>
    </tr>
    <tr>
        <td>郭晖</td>
        <td>人事主管</td>
        <td>北京</td>
        <td>35</td>
        <td>2012/09/26</td>
        <td>&yen;217,500</td>
    </tr>
    <tr>
        <td>贺光明</td>
        <td>技术主管</td>
        <td>南京</td>
        <td>30</td>
        <td>2011/09/03</td>
        <td>&yen;345,000</td>
    </tr>
    <tr>
        <td>邓小燕</td>
        <td>CMO</td>
        <td>南京</td>
        <td>40</td>
        <td>2009/06/25</td>
        <td>&yen;675,000</td>
    </tr>
    <tr>
        <td>白莉惠</td>
        <td>售前支持</td>
        <td>南京</td>
        <td>21</td>
        <td>2011/12/12</td>
        <td>&yen;106,450</td>
    </tr>
    <tr>
        <td>杨海霞</td>
        <td>销售代表</td>
        <td>成都</td>
        <td>23</td>
        <td>2010/09/20</td>
        <td>&yen;85,600</td>
    </tr>
    <tr>
        <td>利旭日</td>
        <td>CEO</td>
        <td>广州</td>
        <td>47</td>
        <td>2009/10/09</td>
        <td>&yen;1,200,000</td>
    </tr>
    <tr>
        <td>范永胜</td>
        <td>开发者</td>
        <td>北京</td>
        <td>42</td>
        <td>2010/12/22</td>
        <td>&yen;92,575</td>
    </tr>
    <tr>
        <td>于怀斌</td>
        <td>大区经理</td>
        <td>苏州</td>
        <td>28</td>
        <td>2010/11/14</td>
        <td>&yen;357,650</td>
    </tr>
    <tr>
        <td>赵淑娜</td>
        <td>软件工程师</td>
        <td>深圳</td>
        <td>28</td>
        <td>2011/06/07</td>
        <td>&yen;206,850</td>
    </tr>
    <tr>
        <td>张淑杰</td>
        <td>COO</td>
        <td>深圳</td>
        <td>48</td>
        <td>2010/03/11</td>
        <td>&yen;850,000</td>
    </tr>
    <tr>
        <td>陈俊军</td>
        <td>区域销售</td>
        <td>上海</td>
        <td>20</td>
        <td>2011/08/14</td>
        <td>&yen;163,000</td>
    </tr>
    <tr>
        <td>郭增杰</td>
        <td>集成专家</td>
        <td>成都</td>
        <td>37</td>
        <td>2011/06/02</td>
        <td>&yen;95,400</td>
    </tr>
    <tr>
        <td>林云</td>
        <td>开发者</td>
        <td>广州</td>
        <td>53</td>
        <td>2009/10/22</td>
        <td>&yen;114,500</td>
    </tr>
    <tr>
        <td>郭述龙</td>
        <td>技术作者</td>
        <td>广州</td>
        <td>27</td>
        <td>2011/05/07</td>
        <td>&yen;145,000</td>
    </tr>
    <tr>
        <td>杨军</td>
        <td>团队主管</td>
        <td>深圳</td>
        <td>22</td>
        <td>2008/10/26</td>
        <td>&yen;235,500</td>
    </tr>
    <tr>
        <td>张海龙</td>
        <td>售后支持</td>
        <td>北京</td>
        <td>46</td>
        <td>2011/03/09</td>
        <td>&yen;324,050</td>
    </tr>
    <tr>
        <td>耿静</td>
        <td>营销设计师</td>
        <td>深圳</td>
        <td>47</td>
        <td>2009/12/09</td>
        <td>&yen;85,675</td>
    </tr>
    <tr>
        <td>刘晋荣</td>
        <td>办公室主管</td>
        <td>深圳</td>
        <td>51</td>
        <td>2008/12/16</td>
        <td>&yen;164,500</td>
    </tr>
    <tr>
        <td>孙宁</td>
        <td>秘书</td>
        <td>深圳</td>
        <td>41</td>
        <td>2010/02/12</td>
        <td>&yen;109,850</td>
    </tr>
    <tr>
        <td>邢洪锐</td>
        <td>财务总监</td>
        <td>深圳</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>&yen;452,500</td>
    </tr>
    <tr>
        <td>陈云云</td>
        <td>办公室主管</td>
        <td>广州</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>&yen;136,200</td>
    </tr>
    <tr>
        <td>张禄</td>
        <td>主任</td>
        <td>南京</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>&yen;645,750</td>
    </tr>
    <tr>
        <td>王增凤</td>
        <td>技术支持工程师</td>
        <td>苏州</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>&yen;234,500</td>
    </tr>
    <tr>
        <td>沈捷</td>
        <td>软件工程师</td>
        <td>广州</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>&yen;163,500</td>
    </tr>
    <tr>
        <td>汪化言</td>
        <td>技术支持工程师</td>
        <td>上海</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>&yen;139,575</td>
    </tr>
    <tr>
        <td>杨正机</td>
        <td>开发者</td>
        <td>南京</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>&yen;98,540</td>
    </tr>
    <tr>
        <td>戴向军</td>
        <td>技术支持工程师</td>
        <td>深圳</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>&yen;87,500</td>
    </tr>
    <tr>
        <td>王延芳</td>
        <td>数据分析工程师</td>
        <td>苏州</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>&yen;138,575</td>
    </tr>
    <tr>
        <td>沈健</td>
        <td>软件工程师</td>
        <td>南京</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>&yen;125,250</td>
    </tr>
    <tr>
        <td>刘伟峰</td>
        <td>软件工程师</td>
        <td>深圳</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>&yen;115,000</td>
    </tr>
    <tr>
        <td>陆先生</td>
        <td>初级Javascript开发者</td>
        <td>北京</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>&yen;75,650</td>
    </tr>
    <tr>
        <td>纪虹羽</td>
        <td>销售代表</td>
        <td>南京</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>&yen;145,600</td>
    </tr>
    <tr>
        <td>肖艳</td>
        <td>大区经理</td>
        <td>广州</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>&yen;356,250</td>
    </tr>
    <tr>
        <td>沈国金</td>
        <td>系统管理员</td>
        <td>广州</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>&yen;103,500</td>
    </tr>
    <tr>
        <td>王燕峰</td>
        <td>开发者</td>
        <td>深圳</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>&yen;86,500</td>
    </tr>
    <tr>
        <td>徐若琳</td>
        <td>大区经理</td>
        <td>北京</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>&yen;183,000</td>
    </tr>
    <tr>
        <td>徐成业</td>
        <td>Javascript开发者</td>
        <td>苏州</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>&yen;183,000</td>
    </tr>
    <tr>
        <td>李岸白</td>
        <td>客户服务</td>
        <td>南京</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>&yen;112,000</td>
    </tr>
    </tbody>
</table>