Блог

Я создаю таблицу сравнения и хочу иметь возможность скрывать все строки в datatable, которые имеют одинаковое значение столбца 2 amp; и столбца 3. Я создал пользовательскую кнопку, которая запускает приведенный ниже js:

 action: function ( e, dt, node, config ) {                           
   var rows = $("#compare").find("tbody tr"); //find all rows

   rows.each(function() {
     var thisRow = $(this),
     value1 = thisRow.find("#1"),
     value2 = thisRow.find("#2");

     if(value1.text() == value2.text()){
       thisRow.hide();
     }

   });
}
  

Это скрывает строки на текущей странице с данными, которые являются дубликатами, но по-прежнему показывает 10 результатов для этой страницы, даже если все 10 скрыты. Я прочитал несколько других вопросов, в большинстве ответов рекомендуется применять пользовательский фильтр к строкам из-за подкачки на стороне сервера?

Я хотел бы, чтобы кнопка восстанавливала таблицу только со значениями, где value1 !== value2 , поэтому, если есть 25 результатов, и 20 из них являются дубликатами, таблица будет перезагружена с showing results 1 to 5 of 5 entries.

создание данных ->

 success: function(data){
        var Table = document.getElementById("compare");
        Table.innerHTML = "";
        $("#compare").append(data);
        $("#compare").DataTable({
            dom: 'Bfrtip',                
            buttons: [
                {
                    text: 'My button',
                    action: function ( e, dt, node, config ) {                           
                        
                        var rows = $("#compare").find("tbody tr"); //find all rows

                        rows.each(function() {
                            var thisRow = $(this),
                            value1 = thisRow.find("#1"),
                            value2 = thisRow.find("#2");

                            if(value1.text() == value2.text()){
                                $(this).hide();
                            }

                        });

                        //$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                        //    return table.row(dataIndex).nodes().to$().attr('excluded') != 'true'
                        //})
                        
                        
                    }
                }
            ]
        });

    }
  

Как @charlietfl уже говорил вам, вам следует использовать подход с фильтром данных jQuery.

Что-то вроде этого:

 var table = $('#example').DataTable({
    ordering: false
});

$.fn.dataTableExt.afnFiltering.push(function(settings, data, dataIndex) {
    
     if(data[2] == data[3])
        return false;
     else
        return true;
});

function removeDuplicates() {
   table.draw();
}  

 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<button onclick="removeDuplicates()">Remove Duplicates</button>
<br><br>
<table id="example" class="display" style="width: 100%;">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age 1</th>
            <th>Age 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>47</td>
            <td>47</td>
        </tr>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>61</td>
            <td>42</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>63</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>            
            <td>66</td>
            <td>66</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>41</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>35</td>
            <td>37</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>New York</td>
            <td>30</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>40</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>21</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>23</td>
            <td>23</td>
        </tr>
    </tbody>
</table>