jQuery удаляет старые строки после порога из сгенерированной jsp таблицы данных

#javascript #jquery #jsp #datatable

#javascript #jquery #jsp #datatable

Вопрос:

Я создаю таблицу на веб-странице с помощью скрипта JSP, который, получив список, анализирует значения и генерирует таблицу. В моей таблице должно быть одинаковое количество строк для каждого параметра name (2 в примере), например:

 id name value1 value1
0  name1 12    13
1  name1 11    9
2  name2 14    2
3  name2 14    4
4  name3 12    5
5  name3 1     2
6  name4 12    1
7  name4 15    2
  

Как только jsp получает новый элемент списка, содержащий одно из имен, в этой таблице необходимо удалить более старое вхождение полученного имени и добавить новую строку. Если мы получим новый список имен1, то:

 id name value1 value1
1  name1 11    9
8  name1 21    24
2  name2 14    2
3  name2 14    4
4  name3 12    5
5  name3 1     2
6  name4 12    1
7  name4 15    2
  

Если мы получим новый список name3, то:

 id name value1 value1
1  name1 11    9
8  name1 21    24
2  name2 14    2
3  name2 14    4
5  name3 1     2
9  name3 25    19
6  name4 12    1
7  name4 15    2
  

Вот мой код:

 <table id="myTable">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>value1</th>
<th>value2</th>
</tr>
</thead>

<tbody>
<td>
<c:forEach items="${my_params}" var="param">
<td>${param.param}</td>
</c:forEach>
</td>
</tbody>
  

Поскольку я группирую по именам, я использую следующий код с данными:

 var group = $('tr.group');
var totalGroups = group.length;
var maxRows = totalGroups*2;


var groupColumn = 1;
$('#myTable thead th').unbind('click');
var table = $('#myTable').DataTable({
    "columnDefs": [
        { "visible": false, "targets": groupColumn }
    ],
    "order": [[ groupColumn, 'asc' ]],
    "displayLength": 40,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="5">' group '</td></tr>'
                );

                last = group;
            }
        } );
         if(table.rows().count() >= maxRows) {table.row(0).remove().draw()};
    }
} );
  

Используя этот метод, я никогда не удаляю старую строку, потому что, как только я перезагружаю страницу, она удаляется. Используя предоставленный код, как только я перезагружаю страницу, строка снова перерисовывается. Как я могу удалить старую строку, как только новая будет отрисована после определенного порога?
Спасибо

Ответ №1:

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

Аналогично этому:

 function deleteRow() {
    var group = //get//group//names
    var threshold = totalGroupLines
   while(myTable.rows().count() >= threshold){
     myTable.row(0).remove().draw();
}
}