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

Тема: [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 рядків, починає "все" жахливо віснути.

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

2

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

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

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

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

4

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