1 回答

TA貢獻(xiàn)1821條經(jīng)驗 獲得超5個贊
我能夠通過在 .each 循環(huán)中移動自定義函數(shù)來解決我的問題,將我需要的變量帶入適當(dāng)?shù)姆秶?。我把我的解決方案放在JSFiddle上。
$(function() {
populateEntryTable()
function populateEntryTable() {
$('#entryTableContainer').empty();
/* put demo data in array of objects that is used to populate DataTable */
var entries = [{
name: 'John',
title: 'Coordinator',
age: 20,
salary: 40000
},
{
name: 'Bill',
title: 'Manager',
age: 40,
salary: 200000
},
{
name: 'Amy',
title: 'Manager',
age: 31,
salary: 150000
}
];
/*build my table*/
$('#entryTableContainer').append('<table id="entryTable"><thead><tr></tr></thead><tbody></tbody></table>');
for (var key in entries[0]) {
$('#entryTable thead tr').append('<th>' + key + '</th>');
}
for (var i = entries.length - 1; i >= 0; i--) {
$('#entryTable tbody').append('<tr></tr>');
for (var key in entries[i]) {
$('#entryTable tbody tr:last-child').append('<td>' + entries[i][key] + '</td>');
}
}
$('#entryTable thead tr').clone(true).appendTo('#entryTable thead');
var numberInputs = ['age', 'salary'];
$('#entryTable thead tr:eq(1) th').each(function(i) {
var title = $(this).text();
// if the col requires a text input filter, do text input filter stuff, which works fine. Else if it requires a number range filter, do number filter stuff, which doesn't work fine.
if (numberInputs.indexOf(title) == -1) {
$(this).html('<input type="text" placeholder="Search">');
$('input', this).on('keyup change', function() {
if (entryTable.column(i).search() !== this.value) {
entryTable.column(i).search(this.value).draw();
}
});
} else if (numberInputs.indexOf(title) > -1) {
// get min and max values in each column to set appropriate bootstrap-slider attributes
var min;
var max;
$('#entryTable tbody tr').each(function(j) {
var item = parseFloat($('#entryTable tbody tr:eq(' + j + ') td:eq(' + i + ')').text());
if (min == undefined || item < min) {
min = Math.floor(item);
}
if (max == undefined || item > max) {
max = Math.ceil(item);
}
});
var rangeMax = title == 'age' ? 100 : 1000000;
var step = rangeMax == 100 ? 1 : 10000;
$(this).html('<input id="' + title + '" type="range" value="0" min="0" max="' + rangeMax + '" step="' + step + '">');
var userInput = $('input', this).val();
// custom DataTables function for filtering number ranges
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var colVal = parseFloat(data[i]) || 0;
if (colVal > userInput) {
return true;
}
return false;
}
);
// add listener for bootstrap-slider change
$('input', this).on('change', function() {
userInput = $(this).val();
entryTable.draw();
});
}
});
/* call DataTable on my table and include my option settings */
var entryTable = $('#entryTable').DataTable({
orderCellsTop: true,
paging: false,
bInfo: false,
scrollY: 400,
scrollCollapse: true,
order: [1, 'desc'],
searching: true
});
/* hide whole table search bar--cannot set 'searching' to false because this also disables individual column search capabilities */
$('#entryTable_filter').hide();
}
});
添加回答
舉報