我有一个包含数十万行的大型数据库,所以我想在不使用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
个对象,但是如何在整个数据库内进行过滤和搜索,而不仅仅是通过对象在页面上显示?
答案 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)
的位置: