Как отфильтровать только верхние строки записей с почти одинаковыми значениями в конкретном столбце?

Question

Допустим, у нас есть DataTable с 1000 строками.Значения Col_1 состоят из двух чисел.Первые пять записей следующие:

Col_1 Col_2
10-01 Alex
10-02 John
10-04 Sara
20-07 David
20-09 Will
.      .
.      .
.      .

Как создать фильтр, который показывает только верхнюю строку строк, в которых первая часть значений в Col_1 совпадает?После фильтрации результат должен быть таким:

Col_1 Col_2
10-01 Alex
20-07 David

Answer 1

Привет на основе этого примера фильтрация с диапазонами из документации datatable.net вот мой подход:

   

 $(document).ready(function() {
        var table = $('#example').DataTable();
    	let ranges = [],
        reset = true;   
        $.fn.dataTableExt.afnFiltering.push(
        function( settings, data, dataIndex ) {
        if(settings.nTable.id == 'example' && reset == false ){//filter only the example table
    	  var range =  data[0] , // use data de 1 column
          value = range.substr(0, range.indexOf('-')),//get the value 
          coincidence = false;//set a flag for coincidences
          if(ranges.length == 0 ){//if array length is zero push the first element
          ranges.push(value);
          return true;
          }else if(!ranges.includes(value)){//if not search inside the array
            ranges.push(value);
    		coincidence = true;       
            }
           return coincidence;
          }else{
          return true;
          } 
         }); 
     $('#btnTop').on('click', function(e) {//reset the ranges on each click
     	  e.preventDefault();
     	  ranges = [];
          reset = false;
          table.draw();
     });
     $('#example').on( 'order.dt', function () {//when ordening disable the filter
        ranges = [];
        reset = true;
        table.order();
    } );
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table border="0" cellspacing="5" cellpadding="5">
        <tbody><tr>
            <td>Get top records:</td>
            <td><input type="button" id="btnTop" name="btnTop" value="Get top records"></td>
        </tr>
    </tbody></table>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>data</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10-01</td>
                <td>Alex</td>
            </tr>
            <tr>
                <td>10-02</td>
                <td>Maria</td>
            </tr>
            <tr>
                <td>10-03</td>
                <td>John</td>
            </tr>
            <tr>
                <td>10-05</td>
                <td>Mikasa</td>
            </tr>
            <tr>
                <td>20-07</td>
                <td>David</td>
            </tr>
            <tr>
                <td>20-08</td>
                <td>Andreina</td>
            </tr>
            <tr>
                <td>20-09</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>30-00</td>
                <td>Svetlana</td>
            </tr>
            <tr>
                <td>30-01</td>
                <td>Harry</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>data</th>
                <th>name</th>
           
            </tr>
        </tfoot>
    </table>

Примечание : для сброса таблицы вы можете заказать dataTable.

Надеюсь, это поможет