如何在 asp.net core 中搜索数据表中的动态列？

Question

按照示例，在https://www.datatables.net/release-datatables/examples/api/regex.html上，我想按列归档表格，全局搜索我们工作正常但搜索列显示错误.Uncaught TypeError: $(...).DataTable(...).column(...).search(...).draw is not a function     at filterColumn (Index:667)     at HTMLInputElement.<anonymous> (Index:637)     at HTMLInputElement.dispatch (jquery.min.js:2)     at HTMLInputElement.v.handle (jquery.min.js:2)这是我的代码@section Styles {    <!-- DataTables -->    <link rel="stylesheet" href="~/libs/datatables/css/dataTables.bootstrap.min.css">    <link href="~/css/listedviews.css" rel="stylesheet" />}<script src="https://code.jquery.com/jquery-3.4.1.min.js"        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="        crossorigin="anonymous"></script>@section Scripts {    <!-- DataTables -->    <script src="~/libs/datatables/js/jquery.dataTables.min.js"></script>    <script src="~/libs/datatables/js/dataTable110.21.js"></script>}<script>    $(document).ready(function () {        $('#dailyload').DataTable({            pageLength: 10,            ajax: {                url: '/MonthlyInterest/MonthlyDetails',                dataSrc: ''            },            columns: [                {title: 'Account No', data: 'loanAccountNo'},                {title: 'Amount Written off',data: 'amountWrittenOff'}            ]        });        $('input.global_filter').on('keyup click', function () {            filterGlobal();        });        $('input.column_filter').on('keyup click', function () {            filterColumn($(this).parents('tr').attr('data-column'));        });    });    function filterGlobal() {        $('#dailyload').DataTable().search(            $('#global_filter').val(),        ).draw();    }    function filterColumn(i) {        $('#dailyload').DataTable().column(i).search(            $('#col' + i + '_filter').val()        ).draw();    }</script><div class="container">    <div class="row">        <div class="box">            <div class="box-header">            </div>

Answer 1

其实你很接近。

您忘记将第二个过滤器包含在其自己的行中，并在其tr标签中包含该data-column属性。这是你的原始代码：

<tr>

    <td>Employee Name</td>

    <td align="center"><input type="text" class="global_filter" id="global_filter"></td>

    <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>

</tr>

这就是你应该如何做的：

<tr>

    <td>Employee Name</td>

    <td align="center"><input type="text" class="global_filter" id="global_filter"></td>

</tr>

<tr data-column="0">

    <td>Another Filter</td>

    <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>

</tr>

看看我的例子：

var jsonData = [

  { 

     "loanAccountNo": "500507082020",

     "amountWrittenOff": "$320,800"

  },

  { 

     "loanAccountNo": "308205105020",

     "amountWrittenOff": "$170,750"

  },

  { 

     "loanAccountNo": "120205205070",

     "amountWrittenOff": "$186,800"

  }

];

$(document).ready(function () {

  $('#dailyload').DataTable({

    pageLength: 10,

    /*ajax: {

      url: '/MonthlyInterest/MonthlyDetails',

      dataSrc: ''

    },*/

    data: jsonData,

    columns: [

      {title: 'Account No', data: 'loanAccountNo'},

      {title: 'Amount Written off',data: 'amountWrittenOff'}

    ]

  });

  $('input.global_filter').on('keyup click', function () {

    filterGlobal();

  });

  $('input.column_filter').on('keyup click', function () {

    filterColumn($(this).parents('tr').attr('data-column'));

  });

});

function filterGlobal() {

  $('#dailyload').DataTable().search(

    $('#global_filter').val(),

  ).draw();

}

function filterColumn(i) {

  $('#dailyload').DataTable().column(i).search(

    $('#col' + i + '_filter').val()

  ).draw();

}

/*function filterColumn2(i) {

  $('#dailyload').DataTable().columns(i).search(

    $('#col' + i + '_filter').val()

  ).draw();

}*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="container">

  <div class="row">

    <div class="box">

      <div class="box-header">

      </div>

      <div class="box-body" style="padding-right: 80px">

        <div style="background-color:#f5f5f5; padding:20px">

          <h2>Search Panel</h2>

          <table>

          <tbody>

            <tr>

              <td>Employee Name</td>

              <td align="center"><input type="text" class="global_filter" id="global_filter"></td>

            </tr>

            <tr data-column="0">

              <td>Another Filter</td>

              <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>

            </tr>

          </tbody>

          </table>

        </div>

        <br>

        <table id="dailyload" class="table table-striped">

        </table>

      </div>

    </div>

  </div>

</div>

顺便说一句，在我的第一次尝试中，我遇到了同样的问题（同样的错误信息），我改变了这一行：

 $('#dailyload').DataTable().column(i).search(

为了这：

 $('#dailyload').DataTable().columns(i).search(

最后它按预期工作。注意columns中的额外s。

但后来我再次尝试删除s（带有column），突然间，令我惊讶的是，它正在工作。奇怪的故障，也许？