使用requirejs来加载jquery.tablesort插件,实现网页里表格排序功能的方法及实例演示亲测 原创 收藏

文章标签: 使用实例 RequireJS实例
  • :
  • 06-20 19:06
  • :
  • 44次
  • :
  • 0条
  • 3赞

简介本文和你分享使用requirejs插件来加载jquery.tablesort插件,并且实现为网页里的表格添加排序功能的方法,及完整的在线实例演示。l

requirejs插件是一款用来加载js文件的插件,使用起来非常方便,尤其是在我们的网页里需要引入多个js文件时,用requirejs插件能大大优化我们网页的性能,提高网页的访问速度,您可以关注本站的rquirejs专栏:RequireJS插件

本文站长和大家分享一个requirejs来加载jquery.tablesort插件的方法和实例:

假设我们的网页里有下面这样的一个表格:

具体的HTML如下:

<table id="aijquery" border="1" cellpadding="6" cellspacing="0" align="center">
    <thead>
        <tr>
            <th>ID</th>
            <th>名字</th>
            <th class="num">数字</th>
            <th class="date">日期</th>
            <th>字母</th>
            <th>文字</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张大峰</td>
            <td>9</td>
            <td>1985-10-24</td>
            <td>zhangdafeng</td>
            <td>中国人</td>
        </tr>
        ...
    </tbody>
</table>


我们在网页里引入requirejs文件并且配置好config选项:

<script language="JavaScript" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script language="javascript">
require.config({
    paths: {
        "jquery": "//apps.bdimg.com/libs/jquery/1.9.1/jquery.min",
        "tablesort":"/Html/aijquery/inc/jquery.tablesort.min"
    },
    shim: {
        "tablesort": {
            deps: ["jquery"]
        }
    }
});
</script>


然后我们就可以像下面这样来使用了:

require(["jquery","tablesort"], function($){
    $('table').tablesort();
    $('thead th.date').data('sortBy', function(th,td,tablesort) {
        return new Date(td.text());
    });
    $('thead th.num').data('sortBy', function(th,td,tablesort) {
        return Number(td.text());
    });
});


下面是完整的在线实例演示:

用requirejs来加载jquery.tablesort插件来对表格进行排序的在线演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-16 15:38:28