Как исправить несколько номеров страниц и поиск по датам? Он сохраняет загрузку дополнительного номера страницы и поиск при нажатии (подробности см. Ниже))

Question

У меня есть таблица с идентификатором "пример". Чтобы вставить вход, пользователь должен нажать кнопку Добавить. Появится всплывающее окно, пользователь будет вводить и нажимать кнопку вставки. Это вызовет код JQuery ниже. Но когда я закрываю всплывающее окно и снова нажимаю кнопку «Добавить», чтобы открыть всплывающее окно и перейти к вводу и вставке данных. это начало добавлять дополнительный номер страницы и поиск.

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

// удаляем датируемый стиль - возвращаемся к исходному html var table = $ ('# пример'). 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. Я выхожу из всплывающего ввода
2. Нажмите кнопку «Добавить», чтобы открыть всплывающее окно
3. Нажмите кнопку вставки

Следует просто продолжить добавление данных, продолжить с предыдущей вставки.

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++;

    });