Retrieve All Data From Paginated Data Table

by Zakaria Acharki

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<table id="listcars">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_4">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_5">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_6">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_7">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_8">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_9">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_10">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_11">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_12">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_13">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_14">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_15">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
        <input type="checkbox" data-cost="1" id="pay_16">
      </td>
    </tr>

    <tr>
      <td>Row 4 Label</td>
      <td>
  ...

CSS

#data_table td {
  text-align: center;
}

JavaScript

$(function() {
  $('body').on('blur', '#search_location', function() {
    var excluded_cities = ['ca', 'cali', 'california'];

    if ($.inArray($(this).val(), excluded_cities) != -1) {
      alert("we currently do not hire from the state of California.");
    }
  });
});