Sort ajax table client side

StackOverflow https://stackoverflow.com/questions/14164335

質問

I've tried a few jQuery libraries and so far I like Flexigrid the best. However, it appears I'll need to rewrite my web service that is providing the table data. I'd like to avoid this if possible. My code is below. The result looks great, but the sort does not work.

Can I fix it without rewriting my web service?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pending Server Requests</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/flexigrid.css" rel="stylesheet" />
    <link href="css/flexigrid.pack.css" rel="stylesheet" />
    <script src="Scripts/flexigrid.pack.js"></script>
    <script src="Scripts/flexigrid.js"></script>
    <script src="scripts/functions.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#status').html("Loading Report...");
            $.ajax({
                url: 'reportdata.asmx/rptPendingServerRequests',
                type: 'POST',
                dataType: 'xml',
                success: function (data) {
                    $('#status').html("");
                    $(data).find("Table").each(function () {
                        request_id = $(this).find("request_id").text().toString();
                        status = $(this).find("status").text().toString();
                        req_by_user_id = $(this).find("req_by_user_id").text().toString();
                        $('#report tr:last').after('<tr id="' + request_id + '"><td class="id cell">' + request_id + '</td><td class="status cell">' + getStatus(status) + '</td><td class="user cell">' + req_by_user_id + '</td><td class="link cell"><a href="urlredacted' + request_id + '" target="_blank">View Request</a></span></td></tr>');
                    });
                    $('#report').flexigrid({
                        colModel: [
                            { display: 'ID', name: 'id', width: 40, sortable: true, align: 'center' },
                            { display: 'Status', name: 'status', width: 180, sortable: true, align: 'left' },
                            { display: 'Requested By', name: 'requested_by', width: 120, sortable: true, align: 'left' },
                            { display: 'Link', name: 'link', width: 120, sortable: false, align: 'left' }
                        ],
                        sortname: "id",
                        sortorder: "asc",
                        usepager: false,
                        title: 'Server Requests',
                        useRp: true,
                        rp: 15,
                        showTableToggleBtn: true,
                        width: 700,
                        height: 200
                    });
                },
                error: function (a, b, c) {
                    $('#status').html("Error: " + a.toString() + " " + b.toString() + " " + c.toString());
                }
            });
        });
    </script>
</head>
<body>
    <h1>Pending Server Requests</h1>
    <div id="content">
        <table id="report">
<!--            <thead>
                <tr>
                    <td class="id header">ID</td>
                    <td class="status header">Status</td>
                    <td class="user header">Requested By</td>
                    <td class="header">Link</td>
                </tr>
            </thead>-->
            <tbody>
                <tr style="display:none;"><td>test</td><td>test2</td><td>test3</td><td>test4</td></tr>
            </tbody>
        </table>

    </div>
    <div id="status">NULL</div>
</body>
</html>
役に立ちましたか？

解決

You may want to look at this http://pixelnix.com/flexigrid-jquery-plugin-extending-to-allow-sorting-of-static-grids/

This may resolve your sorting issue but flexigrid uses AJAX extensively.e.g for pagination, changing the pagination size etc. I have gone down this path and strongly recommend re-writing your webservice to handle these calls on the server side.

Also look at this thread Flexigrid not paging

Hope this helps.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top