显示自定义选择数据表中的条目数量

Question

我正在自定义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>

现在我有一个选择onchange的事件我已经尝试了fnFilter和fnsort但是没有一个能够满足我的要求吗？有人可以指导我如何从自定义选择中添加条目过滤器吗？

Fiddle

Answer 1

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

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

以下是documentation的更多示例。

否则，以下是设置自定义select field

的方法

修改

试试这个：

首先，将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();
});