таблицата с данни може да реагира с всички данни повече от нормалната таблица..

В моя случай използвам Ajax с таблица с данни за показване на всички данни от базата данни, но искам да добавя, редактирам и изтривам данни на екрана, преди да изпратя нови данни в таблицата с данни към базата данни.

Можете да импортирате таблица с библиотечни данни от този уебсайт https://datatables.net/

  1. Изпратете ajax за показване на данни като таблица с данни

Първо, нека създадем таблица с id name таблица, която искате

‹table id=”ployTable” class=”table table-striped table-bordered dataTable-content” cellspacing=”0 width=”100%”›
‹thead›
‹tr›
‹th›date‹/th›
‹th›name‹/th›
‹th›action‹/th›
‹/tr›
‹/thead›
‹/маса›

В този случай създавам име на идентификатор на таблица с данни „ployTable“. Ще видим, че има само име на колона в етикет ‹th›‹/th›, но не е необходимо внезапно да поставя данни в етикет ‹td›‹/td›. всяка колона ще отговори и ще се покаже от Ajax следващ индекс

Създавам бутон „търсене“ за изпращане на въведени данни, което е важният ключ за заявка в базата данни. Например избирам дата на днешния ден и след това щраквам върху „търсене“

Ajax за изпращане и показване на данни е по-долу

Всички данни от Ajax ще се показват като ‹td›‹/td› в тялото на таблицата във вашата таблица. Ще забележите, че може да настрои всяка колона да бъде видима на невидимо, както използвате ‹td style=”display:none”›‹/td › и бутон за показване в колона

2. Относно действието на бутона, което създавате в таблицата с данни
В този случай имам 2 бутона, editBtn и deleteBtn. Ако искате да изпратите команда за направете нещо на този ред. Мога да ви препоръчам да използвате:

$(‘#ployTable’).on(“click”, “.edit”, function () {
});

И

$('#ployTable').on(“click”, “.delete”, function () {
var table = $('#ployTable').DataTable();
table.row( $(this).parents('tr')).remove().draw(false); //команда за изтриване на целия този ред
});

Относно бутона за редактиране, ако искате да получите всяка колона в този ред за промяна на данни. Можете да използвате data Object както по-долу:

var data = table.row($(this).closest('tr')).data();
var date= data[Object.keys(data)[0]];
име на промен = данни[Object.keys(данни)[1]];

var rowNumber = table.row($(this).closest(‘tr’)).index(); //за проверка на индекса на реда, който искате да редактирате в таблицата

Можете да използвате команда за редактиране на данни в този ред, както е показано по-долу

var date = $(“#date”).val();
var name = $(“#name”).val();

таблица
.row(rowNumber)
.data([дата, име,
'‹button id=”editBtn” class=”btn btn-wrang btn-flat edit” name=”editBtn ” type=”button”›Edit‹/button›' +
'‹button id=”deleteBtn” class=”btn btn-danger btn-flat delete” name=”deleteBtn” type=”button” деактивиран › Delete‹/button›'
])
.draw();

3. Когато искате да добавите данни в таблица с данни. Можете да направите един бутон за създаване и след това да попълните въвеждане, следвайки количеството колона в таблицата, използвайте командата за добавяне на нов ред с данни, както е показано по-долу

table.row.add([дата, име,
'‹button id=”editBtn” class=”btn btn-wrang btn-flat edit” name=”editBtn” type=”button”›Edit‹/button ›' +
'‹button id=”deleteBtn” class=”btn btn-danger btn-flat delete” name=”deleteBtn” type=”button”›Delete‹/button›'
])
.draw()
.node();

4. За да получите всички данни, които правите в таблицата с данни, можете да използвате

var form_data = table.rows().data();
var f = form_data;
for(var i=0; f.length › i; i++) {
console.log( f[i]); }

Нека опитаме с вашия проект. Благодаря ви, че посетихте моя блог ^^