1 Тема від Betterthanyou Востаннє редагувалося Betterthanyou (02.02.2021 16:04:42)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Тема: [DataTables] Як прискорити роботу "вибрати все" чек-бокса

За допомогою плагіну DataTables я роблю таблицю в якій є чек-бокс поле у всіх рядках.

Перше поле у кожному рядку починається з чек-боксу.

З самого верху є чек-боксу який відповідає за включення/виключення всіх чек-боксів. (Вибрати всіх/Скинути всіх)

 columns: 
[{ title: '<input type="checkbox" id="myAllCheckbox" onclick="SelectAll(this)">', 
data: function (data, type, full) {
   return '<input type="checkbox" class="myCheckboxClass" name="myCheckbox" onclick="myAllCheckboxOff()"/>';
}},

До цього верхнього чек-боксу прив'язана функція SelectAll

function SelectAll(elem)
{
    var currentValue = elem.checked;//Яке встановити значення true чи false
    
    var currentDataTable = myTable.DataTable();//Отримати таблицю у який є ці чек-бокси

    var rowCount = currentDataTable.rows().count();//Порахувати всі рядки 
    for(var i = 0; i < rowCount; i++) {
        var inputs = currentDataTable.cell({ row: i, column: 0 }).node().getElementsByTagName('input');//Взяти чек-бокс
        if(inputs.length >= 1 && inputs[0].type === 'checkbox')//Перевірити що ми точно взяли чек-бокс
        {
            inputs[0].checked = currentValue;//Вставити значення
        }
    }
}

Якщо потрібно обрати / скинути більше 1500 рядків, починає "все" жахливо віснути.

Як виправити це ?

Betterthanyou вебсайт

2 Відповідь від Q-bart

  • Q-bart
  • Q-bart
  • Хочу бути модератором, щоб такі штуки ставити
  • Поза форумом
  • Звідки: Центр інтернету
  • Дата реєстрації: 14.06.2014
  • Повідомлень: 1 725
    • Репутація: 717

Re: [DataTables] Як прискорити роботу "вибрати все" чек-бокса

Betterthanyou написав:

За допомогою плагіну DataTables я роблю таблицю в якій є чек-бокс поле у всіх рядках.

Перше поле у кожному рядку починається з чек-боксу.

З самого верху є чек-боксу який відповідає за включення/виключення всіх чек-боксів. (Вибрати всіх/Скинути всіх)

 columns: 
[{ title: '<input type="checkbox" id="myAllCheckbox" onclick="SelectAll(this)">', 
data: function (data, type, full) {
   return '<input type="checkbox" class="myCheckboxClass" name="myCheckbox" onclick="myAllCheckboxOff()"/>';
}},

До цього верхнього чек-боксу прив'язана функція SelectAll

function SelectAll(elem)
{
    var currentValue = elem.checked;//Яке встановити значення true чи false
    
    var currentDataTable = myTable.DataTable();//Отримати таблицю у який є ці чек-бокси

    var rowCount = currentDataTable.rows().count();//Порахувати всі рядки 
    for(var i = 0; i < rowCount; i++) {
        var inputs = currentDataTable.cell({ row: i, column: 0 }).node().getElementsByTagName('input');//Взяти чек-бокс
        if(inputs.length >= 1 && inputs[0].type === 'checkbox')//Перевірити що ми точно взяли чек-бокс
        {
            inputs[0].checked = currentValue;//Вставити значення
        }
    }
}

Якщо потрібно обрати / скинути більше 1500 рядків, починає "все" жахливо віснути.

Як виправити це ?

жахливо це на скільки?

отаке в мене >10к чекбоксів витримує доволі ок (десь 5секунд) 

        let checkBoxes = $("input[name = 'batch_objects_list']");
        let selectAllCheckBox = $("#select_all");
        let selectAllClicked = false;
        checkBoxes.shiftSelectable();
        selectAllCheckBox.click(function () {
            selectAllClicked = !selectAllClicked;
            checkBoxes.prop('checked', selectAllClicked);
        });
        checkBoxes.click(function () {
            selectAllClicked = false;
            selectAllCheckBox.prop('checked', false)
        })
Подякували: Betterthanyou1

3 Відповідь від Betterthanyou

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: [DataTables] Як прискорити роботу "вибрати все" чек-бокса

жахливо це на скільки?

1000 приблизно 3-7 сек

Betterthanyou вебсайт

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: [DataTables] Як прискорити роботу "вибрати все" чек-бокса

1. var ніхто зараз не юзає
2. вам треба локалізувати проблєму, на мою думку це може бути 

var rowCount = currentDataTable.rows().count();//

можете спробувати додати

console.log(new Date().toLocaleTimeString())

перед і після того рядка, а потім глянути, скільки часу воно зайняло. Також проблєма може бути в циклі, а саме тут

var inputs = currentDataTable.cell({ row: i, column: 0 }).node().getElementsByTagName('input');//Взяти чек-бокс
Подякували: Betterthanyou2