如何在表中检索有限数量的行但在所有数据库集中搜索?

时间:2017-01-20 10:47:21

标签: javascript php jquery mysql

我有一个包含数十万行的大型数据库,所以我想在不使用DataTables JQuery插件(或其他)显示我的结果的情况下进行服务器端处理。在我的代码示例下面的表格:

searchtable();
sortabletable();

function searchtable() {
  $("#searchtable").keyup(function() {
    var value = this.value.toLowerCase().trim();

    $("table tbody tr").each(function(index) {
      if (!index) return;
      $(this).find("td").each(function() {
        var id = $(this).text().toLowerCase().trim();
        var not_found = (id.indexOf(value) == -1);
        $(this).closest('tr').toggle(!not_found);
        return not_found;
      });
    });
  });
}

function sortabletable() {
  $('.sortable').each(function() {
    var $table = $(this); // This sortable table
    var $tbody = $table.find('tbody'); // Store table body
    var $controls = $table.find('th'); // Store table headers
    var rows = $tbody.find('tr').toArray(); // Store array containing rows

    $controls.on('click', function() { // When user clicks on a header
      var $header = $(this); // Get the header
      var order = $header.data('sort'); // Get value of data-sort attribute
      var column; // Declare variable called column

      // If selected item has ascending or descending class, reverse contents
      if ($header.is('.ascending') || $header.is('.descending')) {
        $header.toggleClass('ascending descending'); // Toggle to other class
        $tbody.append(rows.reverse()); // Reverse the array
      } else { // Otherwise perform a sort                            
        $header.addClass('ascending'); // Add class to header
        // Remove asc or desc from all other headers
        $header.siblings().removeClass('ascending descending');
        if (compare.hasOwnProperty(order)) { // If compare object has method
          column = $controls.index(this); // Search for column’s index no

          rows.sort(function(a, b) { // Call sort() on rows array
            a = $(a).find('td').eq(column).text(); // Get text of column in row a
            b = $(b).find('td').eq(column).text(); // Get text of column in row b
            return compare[order](a, b); // Call compare method
          });

          $tbody.append(rows);
        }
      }
    });
  });
  
  var compare = { // Declare compare object
    name: function(a, b) { // Add a method called name
      a = a.replace(/^the /i, ''); // Remove The from start of parameter
      b = b.replace(/^the /i, ''); // Remove The from start of parameter

      if (a < b) { // If value a is less than value b
        return -1; // Return -1
      } else { // Otherwise
        return a > b ? 1 : 0; // If a is greater than b return 1 OR
      } // if they are the same return 0
    },
    duration: function(a, b) { // Add a method called duration
      a = a.split(':'); // Split the time at the colon
      b = b.split(':'); // Split the time at the colon

      a = Number(a[0]) * 60 + Number(a[1]); // Convert the time to seconds
      b = Number(b[0]) * 60 + Number(b[1]); // Convert the time to seconds

      return a - b; // Return a minus b
    },
    date: function(a, b) { // Add a method called date
      a = new Date(a); // New Date object to hold the date
      b = new Date(b); // New Date object to hold the date

      return a - b; // Return a minus b
    },
    nope: function(a, b) {
      return a - b;
    }
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="filterinplaylist" class="filter hidden-phone">
  <input type="text" id="searchtable" placeholder="Filter...">
</div>

<table class="sortable">
  <thead>
    <tr>
      <th data-sort="nope">id</th>
      <th data-sort="name">Artist</th>
      <th data-sort="name">Title</th>
      <th data-sort="name">Genre</th>
      <th data-sort="duration">Duration</th>
      <th data-sort="date">Release</th>
    </tr>
  </thead>
  <tbody class="ui-sortable">
    <tr data-track-id="320" id="track320" class="ui-sortable-handle">
      <td class="firstTD">
        <div data-tname="945970554_7695391_165206366.mp3" data-tid="1" id="play1" style="display:none"></div>
        <div id="countlist1" class="countlpl" data-count-list="1">1</div>
      </td>
      <td>disgrap96</td>
      <td id="song-url1">
        <div id="song-name1">Hellberg - The Girl</div>
      </td>
      <td>Remix</td>
      <td>3:47</td>
      <td>2015-11-14</td>
    </tr>
    <tr data-track-id="318" id="track318" class="ui-sortable-handle">
      <td class="firstTD">
        <div data-tname="945970554_7695391_165206364.mp3" data-tid="18" id="play18" style="display:none"></div>
        <div id="countlist1" class="countlpl" data-count-list="18">18</div>
      </td>
      <td>Simon Deoro</td>
      <td id="song-url1">
        <div id="song-name18">Love the way</div>
      </td>
      <td>Dance</td>
      <td>3:41</td>
      <td>2015-12-14</td>
    </tr>
  </tbody>
</table>

MySQL返回有限的行,我可以轻松地创建一个Ajax POST来检索更多tr个对象,但是如何在整个数据库内进行过滤和搜索,而不仅仅是通过对象在页面上显示?

2 个答案:

答案 0 :(得分:0)

我认为你应该使用angular.js并获取所有数据并存储在json对象中。然后使用分页来限制你要显示的数据。当你搜索时,你应该搜索那个json对象。

答案 1 :(得分:-1)

我相信你的问题的答案将改变一点SQL语句并添加字段“限制”。像

x

def stream_data(dataset_name, table_name, data): bigquery_client = bigquery.Client() dataset = bigquery_client.dataset(dataset_name) table = dataset.table(table_name) # Reload the table to get the schema. table.reload() rows = data errors = table.insert_data(rows) if not errors: print('Loaded 1 row into {}:{}'.format(dataset_name, table_name)) else: print('Errors:') print(errors) 的位置:

  • “数字”返回的结果数
  • “digit1,digit2”,其中“digit1”是起始编号(例如第二页或第二个ajax请求),“digit2”与“digit”相同 - 总共返回的结果数。