Jquery 在客户端对ajax表进行排序_Jquery_Ajax_Html Table_Asmx_Flexigrid

Jquery 在客户端对ajax表进行排序

jquery ajax

Jquery 在客户端对ajax表进行排序,jquery,ajax,html-table,asmx,flexigrid,Jquery,Ajax,Html Table,Asmx,Flexigrid,我尝试了一些jQuery库，到目前为止我最喜欢FlexGrid。但是，我似乎需要重写提供表数据的web服务。如果可能的话，我想避免这种情况。我的代码如下。结果看起来不错，但排序不起作用我可以在不重写web服务的情况下修复它吗 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pending Server Requests</title&

我尝试了一些jQuery库，到目前为止我最喜欢FlexGrid。但是，我似乎需要重写提供表数据的web服务。如果可能的话，我想避免这种情况。我的代码如下。结果看起来不错，但排序不起作用

我可以在不重写web服务的情况下修复它吗

<!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>


挂起的服务器请求
$（文档）.ready（函数（）{
$（'#status'）.html（“加载报告…”）；
$.ajax({
url:'reportdata.asmx/rptPendingServerRequests'，
键入：“POST”，
数据类型：“xml”，
成功：功能（数据）{
$（'#status'）.html（“”）；
$（数据）。查找（“表”）。每个（函数（）{
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”）。在（“”+请求_id+“”+获取状态（status）+“”+用户请求_id+“”）之后；
});
$（“#报告”）.flexigrid({
colModel：[
{显示：'ID'，名称：'ID'，宽度：40，可排序：true，对齐：'center'}，
{display:'Status'，name:'Status'，width:180，sortable:true，align:'left'}，
{display:'Requested By'，name:'Requested_By'，width:120，sortable:true，align:'left'}，
{显示：'Link'，名称：'Link'，宽度：120，可排序：false，对齐：'left'}
],
sortname:“id”，
分拣员：“asc”，
usepager:错误，
标题：“服务器请求”，
useRp：是的，
rp:15，
showTableToggleBtn：正确，
宽度：700，
身高：200
});
},
错误：函数（a、b、c）{
$（'#status'）.html（“错误：+a.toString（）+”“+b.toString（）+”“+c.toString（））；
}
});
});
挂起的服务器请求
测试2测试3测试4
无效的

您可能想看看这个

这可能会解决您的排序问题，但flexigrid广泛使用AJAX。例如，用于分页、更改分页大小等。我已经走上了这条道路，强烈建议您重新编写Web服务，以便在服务器端处理这些调用

再看看这条线

希望这有帮助。

您可能想看看这个

再看看这条线

希望这有帮助。

谢谢。我已经听从了你的建议，并试图修改我的服务，但我没有任何运气。我在这里发布了一个后续问题：谢谢。我已经听从了你的建议，并试图修改我的服务，但我没有任何运气。我在这里发布了一个后续问题：