Jquery плагин Datatable: использование rowspan в tbody приводит к ошибкам - PullRequest
Новая
       16

Jquery плагин Datatable: использование rowspan в tbody приводит к ошибкам

7 голосов
/ 07 августа 2011

Я использую один jQuery плагин под названием DataTables:

http://www.datatables.net/

Плагин не поддерживает rowspan в tbody 

<tr class="colorrow">   
    <td id="greater" rowspan="3">TMMS</td> 
    <td>Case Volume</td> 
    <td>0</td> 
    <td>0</td> 
    <td>0</td> 
    <td>1</td> 
    <td>1</td>
</tr>

Есть ли другое решение для этого?

Ответы [ 4 ]

1 голос
/ 21 декабря 2017

Попробуй это.Просто примените css "display: none;"где вы хотите применить rowspan. 

<table id="example">
<tr class="colorrow">   
    <td id="greater" rowspan="3">TMMS</td> 
    <td>Case Volume</td> 
    <td>0</td> 
    <td>0</td> 
    <td>0</td> 
    <td>1</td> 
    <td>1</td>
</tr>
<tr class="colorrow">   
    <td style="display: none;">TMMS</td> 
    <td>Case Volume</td> 
    <td>0</td> 
    <td>0</td> 
    <td>0</td> 
    <td>1</td> 
    <td>1</td>
</tr>
<tr class="colorrow">   
    <td style="display: none;">TMMS</td> 
    <td>Case Volume</td> 
    <td>0</td> 
    <td>0</td> 
    <td>0</td> 
    <td>1</td> 
    <td>1</td>
</tr>
</table>

Поместите тот же скрипт для datatable. 

<script type="text/javascript">
      $(document).ready(function() {
            $('#example').DataTable();
      });
</script>
1 голос
/ 31 января 2012
0 голосов
/ 31 октября 2016

Вы можете скрыть ячейки и добавить атрибуты rowspan после перерисовки таблицы

в конфигурации добавить параметр drawCallback : 

"drawCallback": function ( settings ) {
   drawCallback(this.api());                
}

Затем выставьте функцию обратного вызова 

/**
 * drawCallback
 * launch after search
 * 
 * @param {Object} api - dataTable().api()
 * @param {bool} isMobile
 * 
 **/
function drawCallback(api) {
   var rows = api.rows( {page:'current'} ).nodes(),
       settings = {
            "COLUMN_THEME" : 1,
            "COLUMN_SUBTHEME" : 3
       };

        $("#myTable").find('td').show();
        mergeCells(rows, settings.COLUMN_THEME);
        mergeCells(rows, settings.COLUMN_SUBTHEME);
    }
}

, а затем сверните функцию 

/**
 * mergeCells
 * Merges cells with the same wording
 * 
 * @param {Object} api - dataTable().api()
 * @param {Array} rows - array of selected TR element
 * @param {Number} rowIndex - index of column
 * 
 **/
function mergeCells(rows, rowIndex) {

    var last = null,
        currentRow = null,
        k = null,
        gNum = 0,
        refLine = null;

    rows.each( function (line, i) {
        currentRow = line.childNodes[rowIndex];

        if ( last === currentRow.innerText ) {
            currentRow.setAttribute('style', 'display: none');
            ++k;

            return; //leave early
        }

        last = currentRow.innerText;

        if ( i > 0 ) {
            rows[refLine].childNodes[rowIndex].rowSpan = ++k;
            ++gNum;
        }

        k = 0; refLine = i;          
    });

    // for the last group
    rows[refLine].childNodes[rowIndex].rowSpan = ++k;
}
0 голосов
/ 27 ноября 2012

Функция fnFakeRowspan на веб-сайте datatables.net не работает для меня.Вместо этого я написал новую версию:

https://gist.github.com/4155754

Чтобы использовать ее, добавьте атрибуты data-rowspan = "XXX" и data-hide = "true" в ваши ячейки, например так:: 

<table id="table">
  <tr>
    <td data-rowspan="2">-</td>
  </tr>
  <tr>
    <td data-hide="true">-</td>
  </tr>
</table>

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

Затем вызовите ее как обычно:

$('#table').dataTable().fnFakeRowspan();
...