jQuery表格排序插件代码_JS给表格内容动态排序

一个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