Флажок фильтр / кнопка поиска: не может отменить фильтрацию, когда не отмечен - PullRequest
Новая
       9

Флажок фильтр / кнопка поиска: не может отменить фильтрацию, когда не отмечен

0 голосов
/ 28 ноября 2018

У меня есть таблица из таблиц данных.Есть флажок, который при нажатии фильтрует таблицу для отображения только тех данных, которые я хочу видеть.Проблема в том, что когда я снимаю флажок, таблица становится глючной.Функция table.destroy (), по-видимому, возвращает таблицу обратно в прежнее состояние, хотя выглядит так, будто она слишком сильно разрушает (строки на странице внезапно игнорируются + больше не могут щелкать по ячейке, которая открывается в другом окне).Я предполагаю, что destroy () - это неправильный способ вернуть обратно к исходной таблице / данным, когда не проверено.Так какой же правильный путь?

Вот что происходит: 1. нажмите на флажок: правильно фильтруйте данные 2. снимите флажок: таблица выглядит так, как будто она вернулась в нормальное состояние (но на самом деле это не так) 3.Снова установите флажок: больше не фильтрует данные правильно.(таблица теперь пуста) 4. теперь не имеет значения, если я отмечу или сниму флажок, таблица остается прежней (пустой)

Вот мой код: 

var checkbox = $("#checkB");
checkbox.click(function () {
     var table = $('#WTM_LOG').DataTable();
     if (checkbox.is(":checked")) {
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var num = Number(data[4]);
                    if (num > 0) {
                        return true;
                    }
                    return false;
                }
            );
            table.draw();
        }
    else {
            table.destroy();    
        }
    });

Этокак я получаю свои данные для данных: 

$(function LogTable() {

    //var sCsrfToken = $("input[name='__RequestVerificationToken']").val();
    //if (typeof sCsrfToken !== "string") {
    //    sCsrfToken = "";
    //}

    $.ajax({
        url: 'Home/GetTaskLog',
        type: 'post',
        processData: 'false',      
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            xyz(data)
        }
    });
});

function xyz(data) {
    $('#WTM_LOG').dataTable({
        //destroy: true,
        'dom': 'rtp',
        'order': [[0, 'desc']],
        //"ordering": false,       
        "pageLength": 20,
        "data": JSON.parse(data),
        selector: ':not(:first-child)',
        "columns": [
            {
                "data": "TaskSchedulerLogUid",
                "visible": false
            },
            {
                "data": 'TaskName',
                "visible": false
            },
            {
                "data": 'StartDate',
                "render": function (data, type, row) {
                    var dateSplit = data.split("");
                    if (type === "display" || type === "filter") {
                        return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];                        
                    }
                    return data;
                },
            },
            {
                "data": "EndDate",
                "render": function (data, type, row) {
                    var dateSplit = data.split("");
                    if (type === "display" || type === "filter") {
                        return dateSplit[8] + dateSplit[9] + '/' + dateSplit[5] + dateSplit[6] + '/' + dateSplit[0] + dateSplit[1] + dateSplit[2] + dateSplit[3] + " " + dateSplit[11] + dateSplit[12] + ":" + dateSplit[14] + dateSplit[15] + ":" + dateSplit[17] + dateSplit[18];
                    }
                    return data;
                },
            },
            {
                "data": "ErrorCount",
                "render": function (data, type, row) {
                    if (type === 'display') {                                            
                        return (data === 0)
                            ? data = '<span data-search="0"></span>'
                            : data = '<span data-search="1" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></span>';
                    }                                   
                    return data;
                },               
            },
            {
                "data": "EventCount",
                "render": function (data, type, row) {
                    //var id = "details" + row.TaskSchedulerLogUid;     id="' + id + '"
                    return (data > 0)
                        ? data = '<span data-search="details" type="hidden" class="fas fa-list" style="color:blue"></span>'
                        : data = '';
                },
            },            
        ],
        columnDefs: [
            {
                targets: 2
            }
        ]
    });

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Я наконец нашел ответ.в части «остальное» я просто написал: 

else {
            $.fn.dataTable.ext.search.pop();
            table.draw();
        }

et voila!

0 голосов
/ 28 ноября 2018

Вот и все! Я выясняю проблему.Вот окончательный рабочий код.

Подсказка: Я взломал функцию фильтра 

var checkbox = $("#checkB");
var table = $('#example').DataTable();

$.fn.dataTable.ext.search.push(
  function (settings, data, dataIndex) {
      if (checkbox.is(":checked")) {
        return Number(data[1]) > 0 ? true : false;
      } else {
        return true;
      }
  }
);

checkbox.click(function () {
  if (checkbox.is(":checked")) {
    table.draw();
  } else {
    table.draw();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<input type="checkbox" id="checkB" value="Check"> Check this to filter
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Example</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Example1</td>
            <td>-10</td>
        </tr>
        <tr>
            <td>Example2</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Example3</td>
            <td>20</td>
        </tr>
    </tbody>
</table>
...