2016-06-20 3 views
0

Я использую метод группировки, описанный здесь Row GroupingJQuery DataTables изменить строку группировки с выбором

и работает нормально, как есть.

Однако теперь я ищу, чтобы иметь возможность изменить, в каком столбце группируются строки, путем изменения опции выбора.

Теперь я нашел вопрос на форумах, который имеет следующее решение.

// Just redraw 
function Redraw(ordered){ 
    $('#table1').dataTable().fnSettings().aoDrawCallback.push({ 
     "fn": function (settings) { 
      var api = this.api(); 
      var rows = api.rows().nodes(); 
      var last=null; 

      api.column(ordered).data().each(function (group, i) { 
       if (last !== group) { 
        $(rows).eq(i).before(
         '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>' 
        ); 

        last = group; 
       } 
      }); 
     } 
     }); 
    $('#table1').DataTable().draw(false); 
} 

Который пропускает столбец, стол должен быть сгруппирован. Это половина того, что мне нужно, так как теперь ADDS группирует поверх исходной группировки.

Это связано с тем, что новая функция была нажата на aoDrawCallback, а не на ее замену?

Любая идея, как я могу просто заменить оригинальный обратный вызов (и удалить группировку), а затем нарисовать с помощью новой функции обратного вызова?

Любая помощь оценена!

ответ

1

Хорошо, это нашло - довольно прямолинейно на самом деле.

Я нашел ответ here, который приведет меня к правильному методу. Так что в моем коде инициализации функция Жеребьевка обратного вызова передается глобальной переменной (идентификатор столбца) на заказ по:

var table = $('#table1').DataTable({ 
     data : data, 
     scrollCollapse: true, 
     paging:   false, 
     "order": [[ groupCol, "desc" ]], 
     "dom": '<"selector">frtip', 
     "columnDefs": 
      [{ 
       className: "fa fa-plus-circle firstCol", 
       "targets": 0 , 
      },{ 
       className: "descriptionText", 
       "targets": [3,6,10,16] , 
      },{ 
       "targets": 0, 
       "orderable":false, 
       "defaultvalue":'' 
      }, 
      { 
       "targets": [1,4,5,7,9,11,12,13,14,15,16,17,18,19,20,21], 
       "visible": false, 
       "searchable":true 
      }], 
     "drawCallback": function (settings) { 
      var api = this.api(); 
      var rows = api.rows().nodes(); 
      var last=null; 

      api.column(groupCol).data().each(function (group, i) { 
       if (last !== group) { 
        $(rows).eq(i).before(
         '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>' 
        ); 

        last = group; 
       } 
      }); 
     } 
    }); 

Чтобы изменить это я просто глобальная переменная изменилась, когда выбора входного сигнала не изменится, а затем перерисовывать таблицу ,

$('#grouping').on('change',function(){ 
    var table = $('#table1').DataTable(); 
     switch(this.value.toUpperCase()){ 
     case "TOOL": 
      groupCol=1; 
      break; 
     case "COMP": 
      groupCol=5; 
      break; 
     default: 
      groupCol=1; 
     } 
     table.draw(groupCol); 
}) 

Так что я сначала смотрел на метод жесткого кода столбца ID в функции обратного вызова и изменить всю функцию, тогда как сейчас я использую переменную и только перерисовки, которая запускает функцию обратного вызова!

+0

Я работаю над аналогичной проблемой. Не могли бы вы разместить пример jsfiddle @Martin O Leary? Мне интересно видеть html-часть вашего решения (выберите поле для столбцов и столбцов). – lbriquet

+0

привет извините за то, что не отвечал раньше. Я буду работать на скрипке в течение следующей недели и опубликую здесь. –

Смежные вопросы