时间戳

首页 > 解决方案 > 显示来自自定义选择数据表的条目数量

jquery - 显示来自自定义选择数据表的条目数量

问题描述

我正在自定义 jquery 数据表，我想要的是删除默认搜索和条目选择并添加自定义搜索字段和选择字段。

我已经成功地集成了搜索，虽然我正在努力选择让我向你展示我的代码

$(document).ready(function() {
  $tableinstance = $("#example").DataTable();

  $('#customsearchfield').keyup(function() {
    $tableinstance.search($(this).val()).draw();
  });

  $('#sort').change(function() {
    quantity = $(this).val().replace(/[a-z]/gi, ''); //removing chars from 10 ads per page and getting only quantity in integers
    $tableinstance.fnFilter([
      [quantity, 'asc']
    ]);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="table-search">
  <input placeholder="Search Here" id="customsearchfield" />
  <div id="dropdown">
    <select id="sort">
      <option selected disabled="">Select Ads Quantity</option>
      <option>10 Ads per Page</option>
      <option>20 Ads per Page</option>
      <option>30 Ads per Page</option>
      <option>40 Ads per Page</option>
      <option>50 Ads per Page</option>
    </select>
  </div>
</div>

<div id="cars-table">
  <table id="example">
    <thead>
      <tr>
        <th><input type="checkbox" /></th>
        <th>Stock #</th>
        <th>Photo</th>
        <th>Year</th>
        <th>Make/Model/Trim</th>
        <th>Car Status</th>
        <th>Price</th>
        <th>Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint1</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#">Awaiting Delivery</a>
          <img src="images/draft_22.png" />
        </td>
        <td>SitePoint2</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>

      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint3</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#" class="reconditioning">Reconditioning</a>
          <img src="images/draft_25.png" />
        </td>
        <td>SitePoint4</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>

      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint5</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#" class="ready">Ready For Sale</a>
          <img src="images/draft_27.png" />
        </td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>

      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint6</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#" class="ready">Ready For Sale</a>
          <img src="images/draft_27.png" />
        </td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>


      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint7</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#" class="ready">Ready For Sale</a>
          <img src="images/draft_27.png" />
        </td>
        <td>SitePoint8</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>


      <tr>
        <td><input type="checkbox" /></td>
        <td>SitePoint9</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>
          <a href="#" class="ready">Ready For Sale</a>
          <img src="images/draft_27.png" />
        </td>
        <td>SitePoint</td>
        <td>SitePoint</td>
        <td>SitePoint</td>
      </tr>
    </tbody>
  </table>
</div>

现在我有一个 select onchange 事件我已经尝试过 fnFilter 和 fnsort 但它们都不能满足我的要求 谁能指导我如何从自定义选择中添加条目过滤器？

小提琴

标签： jquerydatatables

解决方案

为什么不使用默认的输入/选择字段并稍后修改/设置它们的样式？例如，您可以像这样修改选择字段文本：

$tableinstance=$("#example").dataTable({
    "oLanguage": {
      // _MENU_ is the dropdown menu
      "sLengthMenu": "Select Ads Quantity _MENU_",
    }
});

这是更多示例的文档。

否则，这里是如何设置自定义选择字段

编辑

尝试这个：

首先，将 value 属性添加到您的选择选项中，而不是使用 Regex 将值作为整数来获取，以避免不必要的代码。

// Add value attribute
<select id="sort">
    <option selected disabled="">Select Ads Quantity</option>
    <option value="10">10 Ads per Page</option>
    <option value="20">20 Ads per Page</option>
    <option value="30">30 Ads per Page</option>
    <option value="40">40 Ads per Page</option>
    <option value="50">50 Ads per Page</option>
</select>

然后.change()像在事件中一样添加.keyup()事件

$('#sort').change(function() {
  $tableinstance.search($(this).val()).draw();
});

推荐阅读