零配置

DataTables 默认情况已启用一些功能，搜索、排序、分页等功能已经开启，如本示例所示

姓名	职位	工作地点	年龄	入职时间	年薪
姓名	职位	工作地点	年龄	入职时间	年薪
李霞	系统架构师	北京	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"

$(function () {
    $('#dataTableExample').DataTable($.concatCpt('dataTable'));
});

<table class="table table-bordered table-hover dataTable table-striped w-full text-nowrap" id="dataTableExample" data-plugin="dataTable">
    <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>

<!-- CSS -->
<link rel="stylesheet" href="/public/vendor/datatables-bootstrap/dataTables.bootstrap4.css">

<!-- JS -->
<script src="/public/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/public/vendor/datatables-bootstrap/dataTables.bootstrap4.js"></script>

基本初始化

DataTables 基本初始化

零配置