带有 asp.net 中继器的 Jquery 数据表插件答案

【问题标题】：Jquery data Table plugin with asp.net repeater带有 asp.net 中继器的 Jquery 数据表插件
【发布时间】：2012-12-12 14:09:28
【问题描述】：

我正在使用 jQuery 数据表插件进行分页和搜索。我正在转发器上应用它，它在客户端工作正常。

如何在服务器端更改它，以便将参数值从下拉列表传递到存储过程以仅获取所需的数据行？

简而言之，我的意思是自定义分页。现在我在页面加载时将所有数据行从表绑定到转发器。如何传递参数给它？

这里看看aspx页面

$(document).ready(function () {
        $('#TblDataTable').dataTable({

            "bJQueryUI": true,
            "bSort": true,
            //    "bServerSide": true,
            "sAjaxSource": "/Productindex.aspx/LoadProductList()",
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "url": sSource,
                    "data": "{'sEcho': '" + aoData[0].value + "'}",
                    "success": fnCallback
                });
            },
            // "bProcessing": true,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "sLengthMenu": "Page Size",

            "aLengthMenu": [[5, 10, 15, 25, 50, 100, 150, 200], [5, 10, 15, 25, 50, 100, 150, 200]],
            "aoColumns": [
                   { "bSearchable": true },
                   { "bSearchable": false },
                   { "bSearchable": false },
                   { "bSearchable": false },
                   { "bSearchable": false },
                   { "bSearchable": true },
                   { "bSearchable": false },

            ],

        });
    });<script>

下面是我在页面加载时在 C# 中所做的我正在调用此方法

  public void LoadProductList()
  {
        Products objProducts;

        List<Products> objProductlist;

        try
        {
            objProducts = new Products();
            objProductlist = objProducts.GetProductList();
            rptProduct.DataSource = objProductlist;
            rptProduct.DataBind();
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
        }
    }

我想要的是将一些参数传递给GetProductList 方法以仅获取相关数据。我的意思是如果我从下拉列表中选择 5，那么我将获取 5 行

【问题讨论】：

标签： jquery asp.net datatables repeater

【解决方案1】：

我没用过这种插件，但我可以说重点在方法上

$.ajax({
                "type": "POST",
                "dataType": 'json',
                "contentType": "application/json; charset=utf-8",
                "url": sSource,
                "data": "{'sEcho': '" + aoData[0].value + "'}",
                "success": fnCallback
});

我不知道你有没有用过这个，但你应该首先将方法LoadProductList标记为静态方法并使用属性[WebMethod]。然后在此方法的签名中添加参数，如：

[WebMethod]
public static [List<Produit>] LoadProductList(int rows)

应使用 [Serializable] 属性将产品描述为可序列化。然后，服务器端就可以了，但我建议用控制台程序或soupUI测试它现在，我们可以返回客户端。查看方法$.ajax中的这一行

"data": "{'sEcho': '" + aoData[0].value + "'}",

您应该将 'sEcho' 替换为行，并将 aoData[0].value 替换为您希望返回的行数。然后在方法 fnCallback 中，我认为您应该传递一个带有其签名的函数对象，如方法（结果），在此方法中，您可以使用 result.d 来获取服务器端的方法 LoadProductList 传递的结果。对于测试，你可以尝试使用 console.log([object of javascript]) 来记录 result 和 result.d 如果 d 被 jQuery 使用。

顺便说一句，我在你的脚本中找到了这一行

"sAjaxSource": "/Productindex.aspx/LoadProductList()",

我认为你应该确保路径是正确的，如果不是，你应该使用 ../ 跳转到父级并且不需要'()'（如果这个属性就像你在 $. ajax，您应该将正确的方法路径传递给参数 sSource，它可能类似于 '%parent%/Productindex.aspx/LoadProductList'）。

我希望这个简短的描述可以回答你的问题。

【讨论】：