Я новичок в JS и пытаюсь сделать что-то легкое, но не могу.

Я создаю datatable, в последнем столбце есть кнопки, но когда я нажимаю на них, ничего не происходит.

My Datatable заряжается после нажатия кнопки. ( БТН- поиск)

Спасибо.

$(document).ready( function () {
$('#btn-search').on('click', function() {

        $.ajax({
                type:        "GET",
                url:"{{myurlapi }}",
                }).done(function (result) {
                    var table = $('#example').DataTable( {
                    "data":result.data,
                    "columns": [
                            { "data": "id"  },
                            { "data": "name" },
                            { "data": null }
                        ],
                    "columnDefs": [
                        { "searchable": false,
                          "orderable": false,
                          "targets": 0
                        },
                        { width: '3%',
                          targets: 0
                        },
                        { targets: -1,
                          data: null,
                          defaultContent: '<div class="btn-group"> <button type="button" class=" btn btn-view"><span> <i class="icon-plus"></i></span> </button></div>'
                        },
                                   ],
                    "processing": true,
                    "retrieve": true,
                    "searching": false
            } );
              table.clear().draw();
              table.rows.add(result).draw();
            });
    });

             $('#example tbody').on('click', '.btn-view', function (e) {
                   alert('something')
     } );


});
<div class="col-6">
            <button id='btn-search' class="btn btn-primary px-4">Search</button>
          </div>

<div class='card-body'>
                <table id="example"
                        class="table text-right table-bordered table-striped nowrap"
                        width="100%">
                 <thea

<!-- begin snippet: js hide: false console: true babel: false -->
2
Náthali 24 Сен 2018 в 17:45

2 ответа

Лучший ответ

Вы слишком рано вызываете событие on.click. Если вы запустите его при загрузке dom, он будет работать ТОЛЬКО для кнопок, которые уже находятся в DOM. Все, что вы добавите позже (добавите, замените что угодно), не вызовет событие on.click.

Попробуй это ->

$(document).ready(function() {
    $('#btn-search').on('click', function() {

        $.ajax({
            type: "GET",
            url: "{{myurlapi }}",
        }).done(function(result) {
            var table = $('#example').DataTable({
                "data": result.data,
                "columns": [{
                        "data": "id"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": null
                    }
                ],
                "columnDefs": [{
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        width: '3%',
                        targets: 0
                    },
                    {
                        targets: -1,
                        data: null,
                        defaultContent: '<div class="btn-group"> <button type="button" class=" btn btn-view"><span> <i class="icon-plus"></i></span> </button></div>'
                    },
                ],
                "processing": true,
                "retrieve": true,
                "searching": false
            });
            table.clear().draw();
            table.rows.add(result).draw();
        });
    });
    $(document).ajaxComplete(function() {
        $('#example tbody').on('click', '.btn-view', function(e) {
            alert('something')
        });
    });
});
1
Dante R. 24 Сен 2018 в 15:20

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

Пожалуйста, прочтите эту ссылку, в которой рассказывается, как добавлять события при полной загрузке таблицы.

В javascript, когда вы размещаете селектор, он может применяться только к загруженным элементам, если вы не поместите его в «код, который наблюдает за dom». В вашем случае вам не нужно постоянно смотреть DOM, так как вы можете запускать код после загрузки кнопок в DOM.

Если вы используете вышеупомянутую технику, упомянутую в функции initComplete, вы сможете отлаживать ее. Я не копировал здесь примеры, поскольку они уже упоминались в этой ссылке, однако есть много способов проверить данные, загруженные в таблицу, и я рекомендую использовать тот, который предоставляет библиотека, чтобы в будущем вы могли обновлять таблицы данных и другие библиотеки без каких-либо проблем.

1
Farrukh Subhani 24 Сен 2018 в 15:30