我有一个包含以下列的表格: 姓名、年龄、生日 我还有一个带有日期的输入字段。
生日由日期填充。 我想创建 2 个按钮，例如“选择年龄 > 30 岁的用户”和“选择年龄 > 60 岁的用户”。
var table= $('#users').DataTable({
"drawCallback": updateDays(moment()),
paging: false,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'multi'
},
order: [[ 1, 'asc' ]],
buttons: [{'selectAll',
'selectNone',
],
[...]
$('input[id="dateOfBirthday"]').daterangepicker({
"autoApply": true,
"singleDatePicker": true,
"showDropdowns": true,
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label) {
updateDays(start);
$('input[id="dateOfBirthday"]').val(start.format("DD-MM-YY"));
});
当您更改日期时，它会更新表格内的年份
function updateDays(startDate) {
$('.age').each(
function () {
var diff;
var start;
start = $(this).closest('tr').children('.birthday').text();
start= moment(start, "DD/MM/YY");
diff = startDate.diff(start, 'days');
$(this).text(diff);
});
[...]
代码改编自真实项目，因篇幅过长，如有编码错误，敬请谅解；这里重要的是代码背后的逻辑，而不是代码本身。
谢谢
最佳答案
我相信，这段代码可以很好地完成工作:
//define source data
const srcData = [
{name: 'Christopher Evans', birthday: '13/06/1981'},
{name: 'Samuel L Jackson', birthday: '21/12/1948'},
{name: 'Tom Holland', birthday: '01/06/1996'},
{name: 'Robert Downey Jr', birthday: '04/04/1965'}
];
//define get age function
const getAgeAtDate = (currentDate, birthDate) => {
const thisYearBirthday = new Date(currentDate.getFullYear(), birthDate.getMonth(), birthDate.getDate());
const yearDiff = currentDate.getFullYear()-birthDate.getFullYear();
return thisYearBirthday>currentDate ? yearDiff - 1 : yearDiff;
};
//define reference date (today by default)
var referenceDate = new Date();
//define filter margin 30, 60, 0
var filterMargin = 0;
//define dataTable object
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{title:'name', data:'name'},
{title:'birthday', data:'birthday'},
{title:'age as of today', data: null, render: (data, type, row)=> {
const today = new Date();
const birthday = new Date(...row.birthday.split('/').reverse());
return getAgeAtDate(today, birthday);
}}
]
});
//define external search function to compare with referenceDate
$.fn.DataTable.ext.search.push((settings, row, index, rowObj)=>{
const birthday = new Date(...rowObj.birthday.split('/').reverse());
return getAgeAtDate(referenceDate, birthday)>filterMargin;
});
//set reference date callback
$('#referenceDate').on('change', function(){
if(!$(this).val()){
referenceDate = new Date();
return;
};
referenceDate = new Date(...$(this).val().split('-'));
dataTable.column(2).header().innerText = 'age as of '+referenceDate.toLocaleDateString();
dataTable.rows().every(function(){
const birthday = new Date(...this.data().birthday.split('/').reverse());
const rowNum = this.index();
dataTable.cell(rowNum,2).node().innerText = getAgeAtDate(referenceDate, birthday)
})
});
//apply filter
$('.filter').on('click', function(){
filterMargin = $(this).attr('margin');
dataTable.draw();
});<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<input id="referenceDate" type="date"></input>
<button class="filter" margin="30">older than 30</button>
<button class="filter" margin="60">older than 60</button>
<button class="filter" margin="0">clear filter</button>
<table id="mytable"></table>
</body>
</html>关于javascript - 使用按钮选择带有数据表的特定行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55030607/