带有asp.net转发器的Jquery数据表插件

时间:2012-12-12 14:09:28

标签: jquery asp.net datatables repeater

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

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

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

以下是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行

1 个答案:

答案 0 :(得分:0)

我从来没有使用过这种插件,但我可以说重点在于方法

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

我不知道你是否曾经使用过它,但是你应该首先将方法LoadProductList标记为静态方法并使用属性[WebMethod]。然后在此方法的signautre中添加参数,如:

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

应使用[Serializable]属性将Produit描述为Serializable。 然后,服务器端将没问题,但我建议使用控制台程序或soupUI进行测试 现在,我们可以回到客户端。请查看方法$ .ajax

中的这一行
"data": "{'sEcho': '" + aoData[0].value + "'}",

你应该用行替换'sEcho',用你想要返回的行数替换aoData [0] .value。 然后在方法fnCallback中,我认为你应该传递一个函数对象及其签名方法(结果),在这个方法中,你可以使用result.d来获取服务器端方法LoadProductList传递的结果。对于测试,如果jQuery使用d,你可以尝试使用console.log([javascript]对象)来记录结果和结果。

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

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

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

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