Sort ajax table client side

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

Question

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>
Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top