jquery表格排序插件

jquery.sorttable.js

(function($) {

    $.fn.sortable = function(options) {
        var sortTable = $(this);
        var sortRows = $("tbody > tr", sortTable).get();
        var sortTitles = $("th.sortable", sortTable);
        var img = $("<img src='' style='margin-left:5'/>");
        var sortImgFlg = $("<span style='margin-left:5'></span>");

        if (sortTitles.length == 0) {
            sortTitles = $("td .sortable", sortTable);
        }
        var defaults = {
            imgPath: ''
        };
        var opts = $.extend(defaults, options);

        sortTitles.each(function() {
            $(this).data("dir", 1) //排序的方向
            .data("index", $(this).prevAll().length) //列索引
            .css("cursor", "pointer").attr("title", "单击排序")
            $(this).click(function() {
                _$this = $(this);
                sortRows.sort(function(a, b) {

                    var td1 = $(a).children("td").eq(_$this.data("index"))
                    var tv1 = td1.attr('sortval');
                    if (!tv1) tv1 = td1.text();
                    tv1 = isNaN(Number(tv1)) ? tv1 : Number(tv1);

                    var td2 = $(b).children("td").eq(_$this.data("index"))
                    var tv2 = td2.attr('sortval');
                    if (!tv2) tv2 = td2.text();
                    tv2 = isNaN(Number(tv2)) ? tv2 : Number(tv2);

                    var dir = _$this.data("dir");
                    if (isNaN(tv1)) {
                        if (dir > 0) return tv1.localeCompare(tv2)
                        return tv2.localeCompare(tv1)
                    } else {
                        if (dir > 0) return tv1 - tv2;
                        return tv2 - tv1;
                    }
                });

                $(this).data("dir", -$(this).data("dir"));
                $(sortRows).each(function() {
                    $("tbody", sortTable).append($(this));
                });

                if (opts.imgPath)
                    $(this).append(img.attr("src", opts.imgPath + ($(this).data("dir") == 1 ? "down" : "up") + ".gif"));
                else
                    $(this).append(sortImgFlg.html($(this).data("dir") == 1 ? "▼" : "▲"));
            });
        });
    }
})(jQuery);


sorttable-demo.html

<!DOCTYPE HTML>
<html>

<head>
    <title>New Document</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script src="jquery.sorttable.js"></script>
    <script type="text/javascript">


    $(document).ready(function() {
        $('#sortTable').sortable()
    })
    </script>

    <style>
    .sortable {
        color:blue
    }
    </style>
</head>

<body>

    <table id='sortTable' border=1>
        <thead>
            <th class="sortable">1 by string</th>
            <th class="sortable">2 by value</th>
            <th class="sortable">3 by string</th>
            <th class="sortable">4 by pinyin</th>
            <th class="sortable">5 by value</th>
            <th>6 not sort</th>
            <th class="sortable">7 by chars</th>
            <th>8 not sort</th>
            <th class="sortable">9 by numers</th>
            <th>10 not sort</th>
        </thead>
        <tr> <td>1.12 %</td>  <td sortval="1.12">1.12 %</td>  <td>s113</td>   <td>一y</td>   <td sortval='1'>一</td> <td>6</td> <td>a</td> <td>8</td> <td>3349</td> <td>10</td></tr>
		<tr> <td>.014 %</td>  <td sortval=".014">.014 %</td>  <td>s233</td>   <td>二e</td>   <td sortval='2'>二</td> <td>6</td> <td>b</td> <td>8</td> <td>923445</td> <td>10</td></tr>
		<tr> <td>2.31 %</td>  <td sortval="2.31">2.31 %</td>  <td>s33</td>    <td>三s</td>   <td sortval='3'>三</td> <td>6</td> <td>c</td> <td>8</td> <td>923</td> <td>10</td></tr>
		<tr> <td>4.3 %</td>   <td sortval="4.3">4.3 %</td>   <td>s13</td>    <td>四s</td>   <td sortval='4'>四</td> <td>6</td> <td>d</td> <td>8</td> <td>952</td> <td>10</td></tr>
		<tr> <td>11.2 %</td>  <td sortval="11.2">11.2 %</td>  <td>s131</td>   <td>五w</td>   <td sortval='5'>五</td> <td>6</td> <td>e</td> <td>8</td> <td>892</td> <td>10</td></tr>
		<tr> <td>11.12 %</td> <td sortval="11.12">11.12 %</td> <td>s11113</td> <td>六l</td>   <td sortval='6'>六</td> <td>6</td> <td>f</td> <td>8</td> <td>594</td> <td>10</td></tr>
		<tr> <td>14.1 %</td>  <td sortval="14.1">14.1 %</td>  <td>s33</td>    <td>七q</td>   <td sortval='7'>七</td> <td>6</td> <td>g</td> <td>8</td> <td>659</td> <td>10</td></tr>
		<tr> <td>13.4 %</td>  <td sortval="13.4">13.4 %</td>  <td>s13</td>    <td>八b</td>   <td sortval='8'>八</td> <td>6</td> <td>h</td> <td>8</td> <td>909</td> <td>10</td></tr>
		<tr> <td>11.9 %</td>  <td sortval="11.9">11.9 %</td>  <td>s3</td>     <td>九j</td>   <td sortval='9'>九</td> <td>6</td> <td>i</td> <td>8</td> <td>23</td> <td>10</td></tr>
		<tr> <td>1.3 %</td>   <td sortval="1.3">1.3 %</td>   <td>s3</td>     <td>十s</td>   <td sortval='10'>十</td> <td>6</td> <td>j</td> <td>8</td> <td>65479</td> <td>10</td></tr>
		<tr> <td>10 %</td>    <td sortval="10">10 %</td>    <td>s</td>      <td>十一s</td> <td sortval='11'>十一</td> <td>6</td> <td>k</td> <td>8</td> <td>479</td> <td>10</td></tr>

    </table>
</body>

</html>


你可能感兴趣的:(jquery表格排序)