jQuery表格排序插件代码_JS给表格内容动态排序
2017-03-16 13:33:04  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 3736
• 1

一个jQuery Table表格排序的插件、可以根据点击显示的表头来对表格排序、并且支持分类排序、支持按数字大小排序同时也支持按英文排序等等、所有的js代码已经封装成jquery.tablesort.js、大家只需要在用到的地方直接引用就可以啦、下面是效果图

html代码

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Band</th>
            <th>Date of Birth</th>
            <th>Age</th>
            <th class="no-sort">Photo</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Thom Yorke</td>
            <td>Radiohead</td>
            <td data-sort-value="2">October 7, 1968</td>
            <td>43</td>
            <td><img src="images/1.jpg" width="50"></td>
        </tr>
        <tr>
            <td>Justin Vernon</td>
            <td>Bon Iver</td>
            <td data-sort-value="4">April 30, 1981</td>
            <td>30</td>
            <th><img src="images/2.jpg" width="50">
                </td>
        </tr>
        <tr>
            <td>Paul McCartney</td>
            <td>The Beatles</td>
            <td data-sort-value="1">June 18, 1942</td>
            <td>69</td>
            <td><img src="images/3.jpg" width="50"></td>
        </tr>
        <tr>
            <td>Sam Beam</td>
            <td>Iron &amp; Wine</td>
            <td data-sort-value="3">July 26, 1974</td>
            <td>37</td>
            <td><img src="images/4.png" width="50"></td>
        </tr>
    </tbody>
</table>

js代码

$(function() {

    var table = $(´<table class="ex-2"></table>´);
    table.append(´<thead><tr><th class="number">Number</th></tr></thead>´);
    var tbody = $(´<tbody></tbody>´);
    for (var i = 0; i < 20; i  ) {
        tbody.append(´<tr><td>´   Math.floor(Math.random() * 100)   ´</td></tr>´);
    }
    table.append(tbody);
    
    $(´.example.ex-2´).append(table);

    $(´table´).tablesort().data(´tablesort´);
    
    $(´thead th.number´).data(´sortBy´, function(th, td, sorter) {
        return parseInt(td.text(), 10);
    });
    //Sorting indicator example
    $(´table.ex-2´).on(´tablesort:start´, function(event, tablesort) {
        $(´table.ex-2 tbody´).addClass("disabled");
        $(´.ex-2 th.number´).removeClass("sorted").text(´Sorting..´);
    });
    $(´table.ex-2´).on(´tablesort:complete´, function(event, tablesort) {
        $(´table.ex-2 tbody´).removeClass("disabled");
        $(´.ex-2 th.number´).text(´Number´);
    });
            
});

以上是Demo的部分代码片段、希望对大家有用、下面给大家贴上Demo的源代码下载

jquery 表格排序实例Demo源代码下载链接: jquery 表格排序 密码: ehvp

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛