Блог

Главная - Вопросы по программированию - Выберите определенные строки с таблицами данных с помощью кнопки

Выберите определенные строки с таблицами данных с помощью кнопки

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

У меня есть таблица с такими столбцами: имя, возраст, день рождения, у меня также есть поле ввода с датой.

день рождения заполняется датой. Я хочу создать 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);
        });

[…]

Код адаптирован из реального проекта, потому что он слишком длинный, поэтому, пожалуйста, поймите, если есть какие-то ошибки кодирования; здесь важна логика, лежащая в основе кода, а не сам код.

Спасибо

Комментарии:

1. Не могли бы вы немного объяснить бизнес-логику, лежащую в основе? Как я понял, в вашем поле ввода указаны некоторые данные, а ваши кнопки фильтруют таблицу, чтобы соответствовать пользователям, которым на момент наступления этой даты исполнилось 30 (или старше 60) лет? Кроме того, я не смог понять логику обновления лет (дней рождения?), Поскольку предоставленного контекста недостаточно. Не могли бы вы поделиться некоторыми подробностями?

2. Привет @ygorbunkov, спасибо за ответ. У меня есть это поле ввода, в котором я выбираю дату (например, 2020/03/07). В таблице у меня есть пользователь John Doe, 1988 года рождения. Таким образом, поле возраста будет обновлено до 32. Если я изменю дату на 2021/07/20, возраст будет 33. Если я выберу 2005/01/10, возраст будет равен 17, поэтому, когда я нажимаю «пользователи с возрастом > 30», в первых 2 случаях будет выбран пользователь, но не в последнем случае (2005 год).

Ответ №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>

Комментарии:

1. Привет @ygorbunkov, что, если я захочу выбрать строки? Я имею в виду, я хочу, чтобы все строки оставались видимыми, просто выберите пользователя с возрастом> 30, например

2. Вам понадобится select расширение ( datatables.net/extensions/select ) и небольшие изменения в приведенном выше коде: codepen.io/ygorbunkov/pen/PLjoRw?editors=1010