Question

我有一个带有此列的表：名称，年龄，生日我还有一个带有日期的输入字段。

生日将填充一个日期。我想创建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);
        });

[...]

该代码是根据实际项目改编的，因为它太长了，因此请了解是否存在一些编码错误；重要的是代码背后的逻辑，而不是代码本身。

谢谢

Answer 1

我相信，这段代码可以很好地完成工作：

//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>

使用按钮使用DataTables选择特定的行

1 个答案: