无法将行动态添加到 Jquery 数据表

Question

我在 jquery 数据表中执行 2 个函数。根据选择标签搜索和过滤表格。通过 ajax 将行动态添加到数据表。当我添加行时，虽然行被添加到表中并且行数在分页中增加但是表由于搜索功能而显示空行。刷新表格后，我就能看到所有行。我发现主要问题出在$.fn.dataTable.ext.search.push()函数中，因为table.rows.add($trHTML).draw(); 不管用。由于我无法解决的搜索功能，正在创建一些依赖项。请提供一些建议来解决它。

Answer 1

我用我的一个小存储库创建了一个小示例，希望它能帮助您解决问题：

var table = $('#example').DataTable({

  "bLengthChange": false,

  //searching: false,

  pageLength: 3,

  dom: 'tip'

});

  

$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {

    

    var filterCategory= $("#cato option:selected").text().toUpperCase();

    var filterSubCategory= $("#subo option:selected").text().toUpperCase();

    var subCategory = String(data[2]).toUpperCase();

    var category = String(data[3]).toUpperCase();

    

    //console.log(filterSubCategory);

    

    if(filterSubCategory != "-SELECT SUBCATEGORY-") {

        if ( filterCategory == category && filterSubCategory == subCategory)

             return true;

        }

        else if(filterCategory != "-SELECT CATEGORY-") {

            if ( filterCategory == category)

             return true;

        }

        

        return false;

    }

);

$('#cato').on('change', function() {

  $('#subo').val("");

  table.draw();

});

$('#subo').on('change', function() {

  table.draw();

});

function getInfo() {

        var $subCategory = $("#subo option:selected").text()

        $.ajax({

      type:'GET',

      url: "https://my-json-server.typicode.com/SagnalracSO/repo/items?subcategory=" + $subCategory,

      /*data:{

        name:$('#name').val(),

        desc:$('#desc').val(),

        category:$("#catoo option:selected").text(),

        ,

        'csrfmiddlewaretoken': '{{ csrf_token }}'

      },*/

      dataType: "json",

      beforeSend: function(jqXHR, settings) {

      

          if($subCategory.toUpperCase() == '-SELECT SUBCATEGORY-') {

              alert('Select a SubCategory');

                jqXHR.abort();

          }

      },

      success: function(data) {

        

        var item = data[0];

        var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");

        table.row.add(jRow).draw();

      }

   });

}

<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>

<select id="cato" class="form-control" >

  <option value="" disabled selected="true">-Select Category-</option>

  <option>Electronics</option>

  <option>Sports</option>

</select>

<select id="subo" class="form-control">

   <option value="" disabled selected="true">-Select Subcategory-</option>

   <option>Laptop</option>

   <option>Mobile</option>

</select>

<table id="example" class="table display">

  <thead>

    <tr>

      <th>Id</th>

      <th>Product</th>

      <th>Subcategory</th>

      <th>Category</th>

    </tr>

  </thead>

  <tbody id="r">

    <tr>

      <td>1</td>

      <td>Samsung</td>

      <td>Mobile</td>

      <td>Electronics</td>

    </tr>

    <tr>

      <td>2</td>

      <td>Racket</td>

      <td>Tennis</td>

      <td>Sports</td>

    </tr>

    <tr>

      <td>3</td>

      <td>Bat</td>

      <td>Cricket</td>

      <td>Sports</td>

    </tr>

    <tr>

      <td>4</td>

      <td>Dell</td>

      <td>Laptop</td>

      <td>Electronics</td>

    </tr>

    <tr>

      <td>5</td>

      <td>Iphone</td>

      <td>Mobile</td>

      <td>Electronics</td>

    </tr>

    <tr>

      <td>6</td>

      <td>Soccer Ball</td>

      <td>Soccer</td>

      <td>Sports</td>

    </tr>

  </tbody>

</table>

<br><br>

<input type="button" value="ADD ROWS" onClick="getInfo()" />

如果您的 Ajax 请求返回多条记录，那么您可以替换为：

var item = data[0];

    var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");

    table.row.add(jRow).draw();

有了这个：

for (var item in data) {

    

        var item = data[item];

        

        var jRow = $("<tr>").append("<td>" + item.id + "</td><td>" + item.product + "</td><td>" + item.subcategory + "</td><td>" + item.category + "</td>").append("</tr>");

        table.row.add(jRow).draw();

    }

顺便说一句，如果将来你想创建涉及调用 API（通过 Ajax 请求）的示例，就像我在这个示例中所做的那样，我想向你推荐这个网站JSONPlaceholder