亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 asp.net core 中搜索數據表中的動態列?

如何在 asp.net core 中搜索數據表中的動態列?

www說 2022-12-22 15:09:49
按照示例,在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>
查看完整描述

1 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

其實你很接近。


您忘記將第二個過濾器包含在其自己的行中,并在其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),突然間,令我驚訝的是,它正在工作。奇怪的故障,也許?


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號