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

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服务器端都做工精细

我的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)); 

    } 

所有的工作细使用 “的主要搜索输入框” 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 + "  "; 
      }, 
      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(); 
      }); 
     });