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

Posted 2023-05-09

【中文标题】如何修复多个页码并在数据表中搜索？当我单击时，它会保持加载额外的页码和搜索（请参阅下面的详细信息））

【英文标题】：How to fix multiple page number and search in datatable? It keep load extra page number and search when i click (refer detail below))

【发布时间】：2019-10-26 12:01:17

【问题描述】：

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

我尝试将它放在数据表初始化之后，但这会清除所有数据表样式。我尝试在初始化之前放置，但它以某种方式使我的功能不起作用。

//删除可数据样式-返回初始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++;

    );

我希望表格不要每次都添加额外的页面和搜索：

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

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

【参考方案1】：

我实际上添加了这些代码来删除由数据表创建的额外元素。现在它按预期工作了。

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

$('#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++;

    );