首頁猿問如何修復表格中的數據范圍過濾器？

如何修復表格中的數據范圍過濾器？

JavaScript

森欄 2021-12-12 09:56:08

我正在使用腳本來過濾開始/結束日期之間的日期，但它不會在我的表中執行任何操作。 <script> $(document).ready(function () { $(function () { var start = moment("2019-10-01 00:00:00"); var end = moment("2019-10-31 23:59:59"); function cb(start, end) { $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); } $('#reportrange').daterangepicker({ startDate: start, endDate: end, ranges: { } }, cb); cb(start, end); }); $('#reportrange').on('apply.daterangepicker', function (ev, picker) { var start = picker.startDate.format('YYYY-MM-DD'); var end = picker.endDate.format('YYYY-MM-DD'); console.log("-----------------------------"); $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) { var min = new Date(start); var max = new Date(end); var startDate = new Date(data[1]); console.log(startDate + " <= " + max + " --- " + (startDate <= max));這是表格，我希望它可以過濾帶有開始和結束日期的日期，但它根本不做任何事情

查看完整描述

2 回答

www說

TA貢獻1775條經驗獲得超8個贊

現在這實際上是您問題的答案：我在查看https://www.daterangepicker.com/和 moment.js 文檔后重建了您的邏輯。

行的過濾可以在 daterangepicker 的回調函數中完成，如下所示。僅當表行的日期介于日期范圍選擇器的所選開始日期和結束日期之間時，才會顯示該行。如果您真的想在選擇后查看所選范圍，您還應該將 daterangepicker 字段設為一個<input type="text">字段。

$('#reportrange').daterangepicker({startOfWeek: 'monday'},function(start,end){

$('#mydataTable tr').each((i,tr)=>{ // go through each tr of table body:

var dt=moment($('td:eq(4)',tr).text(),'MM/DD/YY'); // parse the date in column 5 using moment.js

$(tr).toggle( start<dt && dt<end ); // if dt is between start and end then show, else hide

})

});

</thead>

<tr>

<td>987654 UserName</td>

<td align="center">Coins</td>

<form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

</td>

</tr><tr>

<td>123456 UserName</td>

<td align="center">Coins</td>

<form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

</td>

</tr><tr>

<td>007 somebody else</td>

<td align="center">Coins</td>

<form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

</td>

</tr><tr>

<td>789101 UserName</td>

<td align="center">Coins</td>

<form action="~/Index"> <button type="submit" class="btn btn-info">Select</button></form>

</td>

</tr>

</tbody>

</table>

</div>

反對回復 2021-12-12

慕田峪9158850

TA貢獻1794條經驗獲得超7個贊

下面的代碼使用 jQuery 并說明了排序，以及基于表行中具有 id order_index 的輸入字段的值和過濾的兩種方法。這三個部分是分開的，并且不相互依賴地工作。您需要稍微調整一下以適合您的情況。

在您的情況下，重要的是將日期放入 javascript Date 類中。不幸的是，javascript 中內置的解析并不可靠，因為它被認為是依賴于實現的，因此您必須使其適合您的特定情況。我建議在 google 中檢查“javascript string to date”搜索掩碼。這應該讓你開始。一旦您以正確的格式（ Date ）獲取日期，您就可以像任何其他變量一樣比較它。

var l_rows = [];

f_table.find('tr').each(function(){

var l_currRow = $(this);

l_rows.push(l_currRow);

})

//filtering 1, the result from the filtering is irrelevant

//for scope of the question, but in the general case

//it is what you are after

//in here since you want to manage a table

//you can go without the filtering of the array

var l_filteredRows = l_rows.filter(function(f_row){

var l_key = f_row.find('#order_index').val();

var l_bResult = (/* condition here*/);

if(l_bResult){

f_row.show();

}else{

f_row.hide();

}

return l_bResult;

});

//filtering 2. no filter to the array, just iteration

f_table.find('tr').each(function(){

var l_key = $(this).find('#order_index ').val();

var l_bResult = (/*condition here*/);

if(l_bResult){

f_row.show();

}else{

f_row.hide();

}

return l_bResult;

});

//sorting

l_rows.sort(function (a, b) {

var keyA = parseInt($('td', a).find('#order_index').val());

var keyB = parseInt($('td', b).find('#order_index').val());

if(keyA > keyB) return 1;

if(keyA < keyB) return -1;

return 0;

});

f_table.html('');

for(var i=0;i<l_rows.length;i++){

f_table.append(l_rows[i]);

}

反對回復 2021-12-12

2 回答
0 關注
114 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何修復表格中的數據范圍過濾器？

如何修復表格中的數據范圍過濾器？

2 回答

添加回答

如何修復表格中的數據范圍過濾器？