Выберите конкретные строки с помощью DataTables, используя кнопку - PullRequest
Новая
       17

Выберите конкретные строки с помощью DataTables, используя кнопку

0 голосов
/ 06 марта 2019

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

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

1 голос
/ 07 марта 2019

Полагаю, этот код отлично справляется с работой: 

//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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...