1. The first of the two datatable; is when you click add, which appears in the modal box to request data asynchronously; normal
2. It is also normal to add the selected data to another datatable2. In the
3.datatable2 list, after deleting (deleting the dom node) data row A, the table redrawing appears normally, but when you add A to datatable again from the datatable1, although the addition is successful, the original deleted missing A row appears again, and two rows of A data appear;
4. In the second deletion, I separated the data that needed to be deleted in the table data. After reassembly, the table was redrawn normally, but when the deleted data was added again, it still appeared in the original location, resulting in data duplication.
it goes like this: tab1 is a list of goods displayed in a modal box; the data source is an ajax request; tab2 is a simple list of goods; the requirements are: click to add goods; select goods from the list of tab1 products; add them to tab2; after customers add them, they will delete items in tab2. But now: when I test, I found that after deleting from the tab2 list, once again adding the item just deleted from the tab1, tab2 will display both the deleted item and the newly added item, that is, two items, as shown in the figure
. ask, how to break?
ps: (how to modify the source data; the same is true of previous data tables using layui;)
* * datatable1 is the data source for ajax requests;
datatable2 is the data list; no pagination; the data source is an array object passed from datatable1, showing the list of items added from datatable1; * *
var item = []
// [json]
$(document).ready(function () {
$("-sharpadd-goods").click(function () {
var table = $("-sharpmyTable").DataTable({
//
serverSide: true,
"language": language,
"renderer": "bootstrap",
"pagingType": "simple_numbers",
//
"ajax": {
"url": document.URL,
"type": "POST",
data: function (param) {
// ajax
param.action = "getAllGoods";
param.category = $("-sharpgoods-category").val() ? $("-sharpgoods-category").val() : 0;
// console.log(":", param);
return param;
},
},
//
"columns": [
{data: "id"},
{
data: "thumb_url", render: function (data, type, row, meta) {
// url
return "<img class="admin-list-img-size" src="" + data + "" />";
}
},
{data: "name"},
{data: "bar_code"},
{data: "unit"},
{data: "category_name"},
{data: "direct"},
{data: "num"},
{data: "price"},
],
//
"initComplete": function (settings, json) {
// []
$(document).on("change", "-sharpgoods-category", function () {
// console.log(12)
table.ajax.reload();
})
// , class
$("-sharpmyTable tbody").on("click", "tr", function () {
$(this).toggleClass("selected");
})
},
})
//
$("-sharpbutton-save").click(function () {
//
var length = table.rows(".selected").data().length;
// console.log(length );
//
let data = table.rows(".selected").data();
let ids = getGoodsIds(); // id
// console.log(ids)
//
for (let i = 0; i < length; iPP) {
// console.log(data[i])
// 1.id, ids
let id = data[i].id;
// 2.,
if ($.inArray(id, ids) >= 0) {
continue;
}
//
item.push(data[i])
}
addRows(item)
// modal
$("-sharpmyModal").modal("hide");
});
//
$.fn.dataTable.ext.errMode = function (settings, tn, msg) {
console.log(msg);
}
//
$("-sharpmyTable tbody").find(".selected").toggleClass("selected");
//
if (!($("-sharpgoods-category").val() >= 0)) {
//
$("-sharpmyTable_length").after(
"<div class=" + """ + "dataTables_length" + """ + "id=" + """ + "goods-category2" + """ + "style="margin-left: 200px;">" +
"<select id="goods-category" name=" + """ + "category" + """ + "aria-controls=" + """ + "myTable" + """ + "style="width: 200px;">" +
"<option value=" + """ + "0" + """ + "></option>" +
"{volist name="category_list" id="vo"}" +
"<option value=" + """ + "{$vo["id"]}" + """ + ">{$vo["name"]}</option>" +
"{/volist}" +
"</select></div>"
);
}
})
var goodsList = $("-sharpgoodsList").DataTable({
"paging": false,
"ordering": false,
"renderer": "bootstrap",
"data": null,
"language": {
"sSearch": "",
"sLengthMenu": " _MENU_ ",
"sZeroRecords": " ",
"sInfo": " _START_ _END_ / _TOTAL_ ",
"sInfoEmpty": "",
"sInfoFiltered": "( _MAX_ )",
"sProcessing": "<img src="./loading.gif" width="35px" height="35px" />",
"sZeroRecords": "",
"emptyTable": "!"
},
//
select: {
style: "os",
selector: "td:first-child"
},
//
"columns": [{
"data": null,
"defaultContent": "",
"className": "select-checkbox",
"orderable": false,
}, {
"data": null,
"title": "",
"className": "text-center",
"width": "30px",
render: function (data, type, row, meta) { /**/
return 1 + meta.row;
}
}, {
"data": "id",
"title": "ID"
}, {
"data": "name",
"title": ""
}, {
"data": "bar_code",
"title": ""
}, {
"data": "unit",
"title": ""
}, {
"data": "unit_group",
"title": ""
}, {
"data": "goods_code",
"title": ""
}, {
"data": "price",
"title": ""
}, {
"data": "price",
"title": ""
}, {
"data": "price",
"title": ""
}, {
"data": "num",
"title": ""
}, {
"data": "num",
"title": ""
}],
//
"initComplete": function (settings, json) {
// []
// $(document).on("change", "-sharpgoods-category", function () {
// // console.log(12)
// table.ajax.reload();
// })
// , class
// $("-sharpmyTable tbody").on("click", "tr", function () {
// $(this).toggleClass("selected");
// })
},
})
//
function addRows(data) {
goodsList.clear();
goodsList.rows.add(data).draw();
}
// id
function getGoodsIds(){
let arr = []
goodsList.column(2).data().each(function (item) {
arr.push(item)
});
return arr
}
//
$("-sharpgoodsList tbody").on("click", "tr", function () {
let id = $(this).find("td:eq(2)").text() // id
let res = []
goodsList.data().each(function (item) { //
if (id != item.id) {
res.push(item)
}
});
// ;
addRows(res)
