Использование цикла в JS

103

20 января 2022, 22:50

Понимаю, что задача весьма тривиальная... только никак не получается Есть несколько таблиц. Есть JS с функцией разбивки и поиска. Стыковка происходит по ID таблицы.

var TableData = function () {
    "use strict";
    var runDataTable_map = function () {
        var oTable = $('#map1').dataTable({
            "aoColumnDefs": [{
                    "aTargets": [0]
                }],
            "oLanguage": {
                "sLengthMenu": " _MENU_ ",
                "sSearch": "",
                "oPaginate": {
                    "sPrevious": "",
                    "sNext": ""
                }
            },
            "aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "Все"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength": 10,
        });
        $('#map1_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Поиск");
        // modify table search input
        $('#map1_wrapper .dataTables_length select').addClass("m-wrap");
        // modify table per page dropdown        
    };    
    return {
        init: function () {
            runDataTable_map();
        }
    };
}();

где #map1 - это ID таблицы. Так вот при использовании 2 и более таблиц работает он только на первой. Соответственно, приходится добавлять весь скрипт отдельно для каждой. Думал оптимизировать это дело с использованием перебора значений цикла, но все безуспешно: не соображу, как вместо "1" воткнуть цикл

Answer 1

Как-то так можно, если у таблиц id map1, map2, map3....

 var TableData = function () {
    "use strict";
    var runDataTable_map = function (tables) {
        var oTable = {}; 
        tables.forEach(function(e,k,t){
            oTable[k] = $('#map'+(k+1)).dataTable({
                "aoColumnDefs": [{
                    "aTargets": [0]
                }],
                "oLanguage": {
                    "sLengthMenu": " _MENU_ ",
                    "sSearch": "",
                    "oPaginate": {
                        "sPrevious": "",
                        "sNext": ""
                    }
                },
                "aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "Все"]],
                "iDisplayLength": 10,
            });
            $('#map'+(k+1)+'_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Поиск");
            $('#map'+(k+1)+'_wrapper .dataTables_length select').addClass("m-wrap");
        }   
    };    
    return {
        init: function () {
            let tables = document.querySelectorAll('.dataTable');
            runDataTable_map(tables);
        }
    };
}();

Answer 2

Решено! Все оказалось просто... В данном случае максимальное кол-во таблиц - 99.

var TableData = function () {
    "use strict";
    var runDataTable_example = function () {
        for (var i = 0; i < 100; i++) {
            var oTable = $('#map' + i).dataTable({
                "aoColumnDefs": [{
                        "aTargets": [0]
                    }],
                "oLanguage": {
                    "sLengthMenu": " _MENU_ ",
                    "sSearch": "",
                    "oPaginate": {
                        "sPrevious": "",
                        "sNext": ""
                    }
                },
                "aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "Все"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 5,
            });
            $('#map' + i + '_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Поиск");
            // modify table search input
            $('#map' + i + '_wrapper .dataTables_length select').addClass("m-wrap");
            // modify table per page dropdown        
        }
    };
    return {
        init: function () {
            runDataTable_example();
        }
    };
}();

Спасибо всем участникам! С наступающим!

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Использование цикла в JS

Диалоги в Unity 2D

c# linq запрос к двумерному массиву с помощью linq

Проблема с назначением в инспекторе

Ошибка CS0103 Имя "Log" не существует в текущем контексте