Question

我有一个ID为“ example”的表格。要插入输入，用户需要单击添加按钮。将会出现弹出窗口，用户将键入并单击插入。这将触发下面的jquery代码。但是，当我关闭弹出窗口时，再次单击“添加”按钮以重新打开弹出窗口并继续键入并插入数据。它开始添加额外的页码并进行搜索。

我尝试将其放在数据表初始化之后，但这将清除所有数据表样式。我尝试将其放在初始化之前，但是以某种方式使我的功能无法正常工作。

//删除datable样式-返回初始HTML var table = $（'＃example'）。dataTable（）。fnDestroy（）;

var networkdeviceItems = [];
var index = 1;     





$("#addValueNetwork").click(function () {

//create object
var networkdeviceItem = {};

//get val from popup input
networkdeviceItem.Number = index;
networkdeviceItem.Hostname_network = document.getElementById("inputhostname_network").value;

networkdeviceItem.Os_network = document.getElementById("inputos_network").value;

networkdeviceItem.Ipaddress_network = document.getElementById("inputipaddress_network").value;

networkdeviceItem.Location_network = document.getElementById("inputlocation_network").value;

networkdeviceItem.Remarks_network = document.getElementById("inputremarks_network").value;

networkdeviceItems.push(networkdeviceItem);

       $('#example').dataTable({
            "destroy": true,
            "pagingType": "full_numbers",

            data: networkdeviceItems,
            columns: [
                { title: "No", data: "Number" },
                { title: "Hostname", data: "Hostname_network" },
                { title: "Model", data: "Os_network" },
                { title: "IP", data: "Ipaddress_network" },
                { title: "Location", data: "Location_network" },
                { title: "Remarks", data: "Remarks_network" }
            ]
        });



 index++;

    });

我希望表格不会每次都添加额外的页面并进行搜索：

我退出弹出输入
点击添加以重新打开弹出窗口输入
点击插入

它应该继续添加数据，从上一次插入继续。

Answer 1

我实际上添加了这些代码，以删除由datatable创建的额外元素。现在它可以正常工作了。

///删除多余的信息，分页，长度，过滤器-数据表缺陷

$('#example_info').remove();
$('#example_paginate').remove();    
$('#example_length').remove();
$('#example_filter').remove();

更新的代码如下：

   var networkdeviceItems = [];
   var index = 1;     

$("#addValueNetwork").click(function () {

//create object
var networkdeviceItem = {};

//get val from popup input
networkdeviceItem.Number = index;
networkdeviceItem.Hostname_network = document.getElementById("inputhostname_network").value;

networkdeviceItem.Os_network = document.getElementById("inputos_network").value;

networkdeviceItem.Ipaddress_network = document.getElementById("inputipaddress_network").value;

networkdeviceItem.Location_network = document.getElementById("inputlocation_network").value;

networkdeviceItem.Remarks_network = document.getElementById("inputremarks_network").value;

networkdeviceItems.push(networkdeviceItem);

 if (index == 1) {
       $('#example').dataTable({
            "destroy": true,
            "pagingType": "full_numbers",

            data: networkdeviceItems,
            columns: [
                { title: "No", data: "Number" },
                { title: "Hostname", data: "Hostname_network" },
                { title: "Model", data: "Os_network" },
                { title: "IP", data: "Ipaddress_network" },
                { title: "Location", data: "Location_network" },
                { title: "Remarks", data: "Remarks_network" }
            ]
        });
}

if (index > 1) {
           //remove extra info,paginate,length,filter - datatable defect
            $('#example_info').remove();
            $('#example_paginate').remove();

            $('#example_length').remove();
            $('#example_filter').remove();

$('#example').dataTable({
            "destroy": true,
            "pagingType": "full_numbers",

            data: networkdeviceItems,
            columns: [
                { title: "No", data: "Number" },
                { title: "Hostname", data: "Hostname_network" },
                { title: "Model", data: "Os_network" },
                { title: "IP", data: "Ipaddress_network" },
                { title: "Location", data: "Location_network" },
                { title: "Remarks", data: "Remarks_network" }
            ]
        });

 index++;

    });

如何修复多个页码并在数据表中搜索？单击时保持加载额外的页码和搜索（请参阅下面的详细信息）

1 个答案: