показывает количество записей из пользовательских выборочных таблиц

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>

теперь у меня есть событие select onchange, я пробовал fnFilter и fnsort, но ни один из них не работает для моего требования, может кто-нибудь подсказать мне, как добавить фильтр записей из произвольного выбора?

Fiddle

Answer 1

Почему бы не использовать поля ввода / выбора по умолчанию и изменить / стилизовать их позже? например, вы можете изменить текст выделенного поля следующим образом:

$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() event

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