tablesorter倒序排序并显示固定行数

作者: KardelShaw | 来源:发表于2017-12-14 17:13 被阅读0次

tablesorter倒序排序并显示固定行数
微信小程序文本超出部分显示...
uni-app行数显示多余省略号显示
mysql 排序查询笔记
python列表排序方法reverse、sort、sorted
python 15：列表排序
Python Day52(列表排序复盘)
R数据科学day2-2
2019-11-24_单表查询_排序
常用数组排序

设了个定时器，每一秒钟向后台请求一次数据并刷新tablesorter，同时让tablesorter以第5列数字倒序来排列，最多显示10行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>


        .tablesorter thead tr th{
            text-align: center;
        }

        .tablesorter tbody tr td{
            text-align: center;
        }



    </style>

    <title>tablesorter test</title>

    <!--jquery-->
    <script src="js/jquery-2.1.1.min.js"></script>
    <!--tablesorter-->
    <script src="js/jquery.tablesorter.js"></script>
    <link rel="stylesheet" href="css/theme.blue.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>

        $(document).ready(function () {

            $(".table2").tablesorter();

            function tableUpdate(data) {
                var html = "<tr><td>" + data.devSerial + "</td>";
                html += "<td>" + data.createTime + "</td>";
                html += "<td>" + data.lastMessageTime + "</td>";
                html += "<td>" + data.batteryLevel + "</td>";
                html += "<td>" + data.signalStrength + "</td>";
                html += "<td>" + JSON.stringify(data.serviceData) + "</td></tr>";

                var row_len = $(".table2")[0].rows.length;

                if (row_len > 10) {
                    $(".table2")[0].deleteRow(row_len - 1)
                }

                // append new html to table body
                $(".table2 tbody").append(html);
                // let the plugin know that we made a update
                $(".table2").trigger("update");
                // set sorting column and direction, this will sort on the first and third column
                var sorting = [[4, 1]];
                // sort on the first column
                $(".table2").trigger("sorton", [sorting]);
                return false;
            }

            var getDataInternal = {
                url: 'http://xxxxxx',
                dataType: 'json',

                success: function (res) {
                    if (res.code == 0) {
                        tableUpdate(res);
                    }
                },
                error: function (res) {
                    //...
                }
            };

            window.setInterval(
                function () {
                    $.ajax(getDataInternal)
                }
                , 1000);
        })
    </script>

</head>

<body>

<div>

    <div id="table-dev">

        <table id="myTable" class="table2 tablesorter tablesorter-blue" cellpadding="1" width="100%">
            <thead>
            <tr>
                <th width="15%">column1</th>
                <th width="10%">column2</th>
                <th width="10%">column3</th>
                <th width="10%">column4</th>
                <th width="10%">column5</th>
                <th width="45%">column6</th>
            </tr>
            </thead>
            <tbody>
            <tr>

            </tr>
            </tbody>
        </table>

    </div>

</div>

</body>
</html>