Question

我正在尝试通过自定义搜索来检索数据。我的代码工作正常，但当我尝试从输入框中过滤一些数据。这个过程，卡住了。请有人能告诉我我忘了什么吗？

我的JQuery

 //this work fine retrieving data by only if i search using "Search box"
 var dataTableInstance = $("#dataTable").DataTable({
            bServerSide: true,
            sAjaxSource: 'AccountingMovementsService.asmx/GetAccountingMovements',
            "processing": true,
            sServerMethod: 'POST',
            columns: [
                {
                    'data': 'Payment'
                },
                {
                    'data': 'Account',
                },
                {
                    'data': 'customer',
                }
            ]
        });


//here I make all input box under footer columns (work fine)
$('#dataTable tfoot th').each(function () {
            var title = $(this).text();

            $(this).html("<input type='text' placeholder='" + title + "' />");

        });


  //And here i get stuck processing ... and data not come
  dataTableInstance.columns().every(function() {
                    var dataTableColumn = this;
                    $(this.footer()).find('input').on('keyup change', function () {
                        dataTableColumn.search(this.value).draw();
                    });
                });

如果我使用NOT SERVER-SIDE一切正常

我的c＃代码是

 [WebMethod]
    public void GetAccountingMovements(int iDisplayLength, int iDisplayStart, int iSortCol_0, string sSortDir_0, string sSearch)
    {

        int displayLength = iDisplayLength;
        int displayStart = iDisplayStart;
        int sortCol = iSortCol_0;
        string sortDir = sSortDir_0;
        string search = sSearch;
        int filteredCount = 0;
        var accountingTransactions = new List<AccountMovement>();
        string cs = ConfigurationManager.ConnectionStrings["Sg4DevMaster"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("spGetAccountingTransactions", conn);
            cmd.CommandType = CommandType.StoredProcedure;

            cmd.Parameters.Add(new SqlParameter
            {
                ParameterName = "DisplayLength",
                Value = displayLength
            });
            cmd.Parameters.Add(new SqlParameter
            {
                ParameterName = "DisplayStart",
                Value = displayStart
            });
            cmd.Parameters.Add(new SqlParameter
            {
                ParameterName = "SortCol",
                Value = sortCol
            });
            cmd.Parameters.Add(new SqlParameter
            {
                ParameterName = "SortDir",
                Value = sortDir
            });
            cmd.Parameters.Add(new SqlParameter
            {
                ParameterName = "Search",
                Value = search
            });

            conn.Open();
            SqlDataReader rdr = cmd.ExecuteReader();


            while (rdr.Read())
            {
                AccountMovement am = new AccountMovement();

                filteredCount = Convert.ToInt32(rdr["totalCount"]);
                am.payment = Convert.ToDouble(rdr["payment"]);
                am.Account = Convert.ToDouble(rdr["account"]);
                am.Customer = rdr["Customer"].ToString();

                accountingTransactions.Add(am);

            }

        }

        var result = new
        {
            iTotalRecords = GetAccountingMovementsTotalCount(),
            iTotalDisplayRecords = filteredCount,
            aaData = accountingTransactions
        };

        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(result));

    }

所有工作正常使用＆＃34;主搜索输入框＆＃34;在DataTable插件中，但是当将一些数据放在页脚中的自定义输入框中时它会卡住

谢谢你的时间！

Answer 1

如果你去我的GitHub https://github.com/bindrid/DataTablesServerSide看一下c＃课程。这就是我如何获取DataTable提供的参数并将其转换为可用的c＃对象。

还列出了我的Web方法，它使用这些类。

下面是DataTables逻辑，包括你的搜索内容，一切正常。

        var table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "rowCallback": function (row, data) {
                if ($.inArray(data.employeeId, selected) !== -1) {
                    table.row(row).select();
                }
            },
            "infoCallback": function (settings, start, end, max, total, pre) {
                  var api = this.api();
                var pageInfo = api.page.info();
                return 'Page '+ (pageInfo.page+1) +' of '+ pageInfo.pages + "&nbsp;&nbsp;";
            },
            rowId:"employeeId",
            "createdRow": function (row, data, dataIndex) {},
            "columns":  [
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "extn" },
                { "data": "start_date" },
                { "data": "salary" }
            ],
            "select":"multi",
            "lengthMenu": [5, [10, 15, 25, 50, -1], [5, 10, 15, 25, 50, "All"]],
            "pageLength": 5,
            "ajax": {
                contentType: "application/json; charset=utf-8",
                url: "wsSample.asmx/GetDTDataUnserializedObject",
                type: "Post",
                data: function (dtParms) {
                    // notice dtParameters exactly matches the web service

                    return JSON.stringify({ dtParameters: dtParms });
                },
                // Data filter is a part of ajax and lets you look at the raw
                dataFilter: function (res) {
                    // You probably know by know that WebServices
                    // puts your data in an object call d. these two lines puts it
                    // in the form that DataTable expects
                    var parsed = JSON.parse(res);

                    return  JSON.stringify(parsed.d);
                },
                error: function (x, y) {
                    debugger;
                    console.log(x);
                }
            },
            order: [[0, 'asc']]
        });

        // add search boxes to footer
        $('#example tfoot th').each(function () {
            var title = $(this).text();
            $(this).html("<input type='search' placeholder='" + title + "' />");
        });
        //And here i get stuck processing ... and data not come
        table.columns().every(function () {
            var dataTableColumn = this;
            $(this.footer()).find('input').on('keyup change', function () {
                dataTableColumn.search(this.value).draw();
            });
        });

使用自定义列DataTable插件无法从服务器端检索数据

1 个答案: