插件 - DataTables - 表格示例

排序插件（无类型检测）

本示例和另一个有点不同，这个是针对所有列，所以不能加入类型判断。本示例用上了 columns.typeOption 属性，同样使用了 $.fn.dataTable.ext.type.order 方法定义了排序的规则

姓名	职位	工作地点	年龄	入职时间	年薪
姓名	职位	工作地点	年龄	入职时间	年薪
李霞	系统架构师	北京	61	2011/04/25	高
杜重治	会计	上海	63	2011/07/25	中
陈锋	初级开发者	深圳	66	2009/01/12	低
郑伯宁	高级JavaScript开发者	北京	22	2012/03/29	低
施华军	会计	上海	33	2008/11/28	中
吴书振	集成专家	南京	61	2012/12/02	低
张宁	销售代表	深圳	59	2012/08/06	高
马世波	集成专家	上海	55	2010/10/14	中
张章	Javascript开发者	深圳	39	2009/09/15	高
张竹影	软件工程师	北京	23	2008/12/13	低
韩庆福	办公室主管	广州	30	2008/12/19	低
刘勇	客户服务	北京	22	2013/03/03	中
张忆湫	大区经理	深圳	36	2008/10/16	高
尚志兴	高级营销设计师	广州	43	2012/12/18	中
杜若芳	大区经理	广州	19	2010/03/17	低
杨乔松	营销设计师	广州	66	2012/11/27	中
闫跃进	CEO	南京	64	2010/06/09	中
孙凯	系统管理员	南京	59	2009/04/10	低
赖祥校	软件工程师	广州	41	2012/10/13	中
郭晖	人事主管	北京	35	2012/09/26	中
贺光明	技术主管	南京	30	2011/09/03	中
邓小燕	CMO	南京	40	2009/06/25	高
白莉惠	售前支持	南京	21	2011/12/12	低
杨海霞	销售代表	成都	23	2010/09/20	高
利旭日	CEO	广州	47	2009/10/09	高
范永胜	开发者	北京	42	2010/12/22	低
于怀斌	大区经理	苏州	28	2010/11/14	低
赵淑娜	软件工程师	深圳	28	2011/06/07	低
张淑杰	COO	深圳	48	2010/03/11	低
陈俊军	区域销售	上海	20	2011/08/14	低
郭增杰	集成专家	成都	37	2011/06/02	低
林云	开发者	广州	53	2009/10/22	低
郭述龙	技术作者	广州	27	2011/05/07	低
杨军	团队主管	深圳	22	2008/10/26	中
张海龙	售后支持	北京	46	2011/03/09	高
耿静	营销设计师	深圳	47	2009/12/09	低
刘晋荣	办公室主管	深圳	51	2008/12/16	低
孙宁	秘书	深圳	41	2010/02/12	高
邢洪锐	财务总监	深圳	62	2009/02/14	中
陈云云	办公室主管	广州	37	2008/12/11	低
张禄	主任	南京	65	2008/09/26	高
王增凤	技术支持工程师	苏州	64	2011/02/03	中
沈捷	软件工程师	广州	38	2011/05/03	低
汪化言	技术支持工程师	上海	37	2009/08/19	低
杨正机	开发者	南京	61	2013/08/11	中
戴向军	技术支持工程师	深圳	47	2009/07/07	低
王延芳	数据分析工程师	苏州	64	2012/04/09	中
沈健	软件工程师	南京	63	2010/01/04	低
刘伟峰	软件工程师	深圳	56	2012/06/01	低
陆先生	初级Javascript开发者	北京	43	2013/02/01	中
纪虹羽	销售代表	南京	46	2011/12/06	中
肖艳	大区经理	广州	47	2011/03/21	中
沈国金	系统管理员	广州	21	2009/02/27	高
王燕峰	开发者	深圳	30	2010/07/14	低
徐若琳	大区经理	北京	51	2008/11/13	高
徐成业	Javascript开发者	苏州	29	2011/06/27	中
李岸白	客户服务	南京	27	2011/01/25	高

JavaScript
HTML

$(function () {
    $.fn.dataTable.ext.type.order['salary-grade-pre'] = function (d) {
        switch (d) {
            case '低':
                return 1;
            case '中':
                return 2;
            case '高':
                return 3;
        }
        return 0;
    };

    $('#dataTableExample').DataTable($.concatCpt('dataTable', {
        "columnDefs": [{
            "type": "salary-grade",
            "targets": -1
        }]
    }));
});

<table class="table table-bordered table-hover dataTable table-striped w-full text-nowrap" id="dataTableExample">
    <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>高</td>
    </tr>
    <tr>
        <td>杜重治</td>
        <td>会计</td>
        <td>上海</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>中</td>
    </tr>
    <tr>
        <td>陈锋</td>
        <td>初级开发者</td>
        <td>深圳</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>低</td>
    </tr>
    <tr>
        <td>郑伯宁</td>
        <td>高级JavaScript开发者</td>
        <td>北京</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>低</td>
    </tr>
    <tr>
        <td>施华军</td>
        <td>会计</td>
        <td>上海</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>中</td>
    </tr>
    <tr>
        <td>吴书振</td>
        <td>集成专家</td>
        <td>南京</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>低</td>
    </tr>
    <tr>
        <td>张宁</td>
        <td>销售代表</td>
        <td>深圳</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>高</td>
    </tr>
    <tr>
        <td>马世波</td>
        <td>集成专家</td>
        <td>上海</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>中</td>
    </tr>
    <tr>
        <td>张章</td>
        <td>Javascript开发者</td>
        <td>深圳</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>高</td>
    </tr>
    <tr>
        <td>张竹影</td>
        <td>软件工程师</td>
        <td>北京</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>低</td>
    </tr>
    <tr>
        <td>韩庆福</td>
        <td>办公室主管</td>
        <td>广州</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>低</td>
    </tr>
    <tr>
        <td>刘勇</td>
        <td>客户服务</td>
        <td>北京</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>中</td>
    </tr>
    <tr>
        <td>张忆湫</td>
        <td>大区经理</td>
        <td>深圳</td>
        <td>36</td>
        <td>2008/10/16</td>
        <td>高</td>
    </tr>
    <tr>
        <td>尚志兴</td>
        <td>高级营销设计师</td>
        <td>广州</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>中</td>
    </tr>
    <tr>
        <td>杜若芳</td>
        <td>大区经理</td>
        <td>广州</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>低</td>
    </tr>
    <tr>
        <td>杨乔松</td>
        <td>营销设计师</td>
        <td>广州</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>中</td>
    </tr>
    <tr>
        <td>闫跃进</td>
        <td>CEO</td>
        <td>南京</td>
        <td>64</td>
        <td>2010/06/09</td>
        <td>中</td>
    </tr>
    <tr>
        <td>孙凯</td>
        <td>系统管理员</td>
        <td>南京</td>
        <td>59</td>
        <td>2009/04/10</td>
        <td>低</td>
    </tr>
    <tr>
        <td>赖祥校</td>
        <td>软件工程师</td>
        <td>广州</td>
        <td>41</td>
        <td>2012/10/13</td>
        <td>中</td>
    </tr>
    <tr>
        <td>郭晖</td>
        <td>人事主管</td>
        <td>北京</td>
        <td>35</td>
        <td>2012/09/26</td>
        <td>中</td>
    </tr>
    <tr>
        <td>贺光明</td>
        <td>技术主管</td>
        <td>南京</td>
        <td>30</td>
        <td>2011/09/03</td>
        <td>中</td>
    </tr>
    <tr>
        <td>邓小燕</td>
        <td>CMO</td>
        <td>南京</td>
        <td>40</td>
        <td>2009/06/25</td>
        <td>高</td>
    </tr>
    <tr>
        <td>白莉惠</td>
        <td>售前支持</td>
        <td>南京</td>
        <td>21</td>
        <td>2011/12/12</td>
        <td>低</td>
    </tr>
    <tr>
        <td>杨海霞</td>
        <td>销售代表</td>
        <td>成都</td>
        <td>23</td>
        <td>2010/09/20</td>
        <td>高</td>
    </tr>
    <tr>
        <td>利旭日</td>
        <td>CEO</td>
        <td>广州</td>
        <td>47</td>
        <td>2009/10/09</td>
        <td>高</td>
    </tr>
    <tr>
        <td>范永胜</td>
        <td>开发者</td>
        <td>北京</td>
        <td>42</td>
        <td>2010/12/22</td>
        <td>低</td>
    </tr>
    <tr>
        <td>于怀斌</td>
        <td>大区经理</td>
        <td>苏州</td>
        <td>28</td>
        <td>2010/11/14</td>
        <td>低</td>
    </tr>
    <tr>
        <td>赵淑娜</td>
        <td>软件工程师</td>
        <td>深圳</td>
        <td>28</td>
        <td>2011/06/07</td>
        <td>低</td>
    </tr>
    <tr>
        <td>张淑杰</td>
        <td>COO</td>
        <td>深圳</td>
        <td>48</td>
        <td>2010/03/11</td>
        <td>低</td>
    </tr>
    <tr>
        <td>陈俊军</td>
        <td>区域销售</td>
        <td>上海</td>
        <td>20</td>
        <td>2011/08/14</td>
        <td>低</td>
    </tr>
    <tr>
        <td>郭增杰</td>
        <td>集成专家</td>
        <td>成都</td>
        <td>37</td>
        <td>2011/06/02</td>
        <td>低</td>
    </tr>
    <tr>
        <td>林云</td>
        <td>开发者</td>
        <td>广州</td>
        <td>53</td>
        <td>2009/10/22</td>
        <td>低</td>
    </tr>
    <tr>
        <td>郭述龙</td>
        <td>技术作者</td>
        <td>广州</td>
        <td>27</td>
        <td>2011/05/07</td>
        <td>低</td>
    </tr>
    <tr>
        <td>杨军</td>
        <td>团队主管</td>
        <td>深圳</td>
        <td>22</td>
        <td>2008/10/26</td>
        <td>中</td>
    </tr>
    <tr>
        <td>张海龙</td>
        <td>售后支持</td>
        <td>北京</td>
        <td>46</td>
        <td>2011/03/09</td>
        <td>高</td>
    </tr>
    <tr>
        <td>耿静</td>
        <td>营销设计师</td>
        <td>深圳</td>
        <td>47</td>
        <td>2009/12/09</td>
        <td>低</td>
    </tr>
    <tr>
        <td>刘晋荣</td>
        <td>办公室主管</td>
        <td>深圳</td>
        <td>51</td>
        <td>2008/12/16</td>
        <td>低</td>
    </tr>
    <tr>
        <td>孙宁</td>
        <td>秘书</td>
        <td>深圳</td>
        <td>41</td>
        <td>2010/02/12</td>
        <td>高</td>
    </tr>
    <tr>
        <td>邢洪锐</td>
        <td>财务总监</td>
        <td>深圳</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>中</td>
    </tr>
    <tr>
        <td>陈云云</td>
        <td>办公室主管</td>
        <td>广州</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>低</td>
    </tr>
    <tr>
        <td>张禄</td>
        <td>主任</td>
        <td>南京</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>高</td>
    </tr>
    <tr>
        <td>王增凤</td>
        <td>技术支持工程师</td>
        <td>苏州</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>中</td>
    </tr>
    <tr>
        <td>沈捷</td>
        <td>软件工程师</td>
        <td>广州</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>低</td>
    </tr>
    <tr>
        <td>汪化言</td>
        <td>技术支持工程师</td>
        <td>上海</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>低</td>
    </tr>
    <tr>
        <td>杨正机</td>
        <td>开发者</td>
        <td>南京</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>中</td>
    </tr>
    <tr>
        <td>戴向军</td>
        <td>技术支持工程师</td>
        <td>深圳</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>低</td>
    </tr>
    <tr>
        <td>王延芳</td>
        <td>数据分析工程师</td>
        <td>苏州</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>中</td>
    </tr>
    <tr>
        <td>沈健</td>
        <td>软件工程师</td>
        <td>南京</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>低</td>
    </tr>
    <tr>
        <td>刘伟峰</td>
        <td>软件工程师</td>
        <td>深圳</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>低</td>
    </tr>
    <tr>
        <td>陆先生</td>
        <td>初级Javascript开发者</td>
        <td>北京</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>中</td>
    </tr>
    <tr>
        <td>纪虹羽</td>
        <td>销售代表</td>
        <td>南京</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>中</td>
    </tr>
    <tr>
        <td>肖艳</td>
        <td>大区经理</td>
        <td>广州</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>中</td>
    </tr>
    <tr>
        <td>沈国金</td>
        <td>系统管理员</td>
        <td>广州</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>高</td>
    </tr>
    <tr>
        <td>王燕峰</td>
        <td>开发者</td>
        <td>深圳</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>低</td>
    </tr>
    <tr>
        <td>徐若琳</td>
        <td>大区经理</td>
        <td>北京</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>高</td>
    </tr>
    <tr>
        <td>徐成业</td>
        <td>Javascript开发者</td>
        <td>苏州</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>中</td>
    </tr>
    <tr>
        <td>李岸白</td>
        <td>客户服务</td>
        <td>南京</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>高</td>
    </tr>
    </tbody>
</table>

插件

DataTables 插件

排序插件（无类型检测）