Как интерактивно изменять размер фиксированного столбца в FixedColumns DataTables плагин

Question

игровой

У меня есть следующая таблица:

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>First name</th> 
      <th>Last name</th> 
      <th>Position</th> 
      <th>Office</th> 
      <th>Age</th> 
      <th>Start date</th> 
      <th>Salary</th> 
      <th>Extn.</th> 
      <th>E-mail</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td>Tiger</td> 
      <td>Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 
      <td>61</td> 
      <td>2011/04/25</td> 
      <td>$320,800</td> 
      <td>5421</td> 
      <td>t.nixon@datatables.net</td> 
     </tr> 
    </tbody> 
</table> 

С помощью этого скрипта можно прокручивать 2-ой колонки вперед, и пусть 1-й столбец (First name) фиксированных.

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     scrollY:  "300px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false 
    }); 
    new $.fn.dataTable.FixedColumns(table); 
}); 

JSFiddle

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

Answer 1

Там нет нативного метода в FixedColumns API, чтобы сделать это. Вместо этого установите ширину через header(), здесь установив первый столбец 200px:

table.tables().header().to$().find('th:eq(0)').css('min-width', '200px'); 
$(window).trigger('resize'); 

table.draw() результатов в двойном скроллинге (исчезают при изменении размера, хотя). Как-то FixedColumns не полностью включен в draw() - даже FixedColumns update() делает это правильно. Но запуск resize в окне делает работу правильно.

раздвоенной скрипка ->https://jsfiddle.net/k7err1vb/

---

Update. Смысл вопроса полностью изменился (?)

Ну, когда-то был отличный плагин ColReorderWithResize.js, но это плохо работает с dataTables 1.10.x. Таким образом, вы можете понизить рейтинг, если требование для изменяемого размера фиксированного столбца имеет важное значение. Помимо нового API и стилизации по умолчанию не так много разницы между 1.9.x и 1.10.x - используйте 1.9.x самостоятельно в проекте именно из-за необходимости ColReorderWithResize.

Какой-то парень сделал плагин colResize ->https://github.com/Silvacom/colResize, который работает с 1.10.2 и выше. Здесь используется на скрипке OP в:

var table = $('#example').DataTable({ 
    dom: 'Zlfrtip', 
    //target first column only 
    colResize: { 
     exclude: [2,3,4,5,6,7] 
    }, 
    ... 
}) 

демо ->https://jsfiddle.net/mhco0xzs/ и она «работает» - как-то - но не так гладко, как старый добрый ColReorderWithResize.js. Кто-то может принять вызов для реорганизации ColReorderWithResize.js, но у меня точно нет времени для этого на данный момент.

Answer 2

Вы должны попробовать использовать плагин для добавления изменчивых функций заголовка. Вы можете попробовать использовать это: http://www.bacubacu.com/colresizable/

Вопрос был задан вопрос и ответил на уже здесь stackoverflow.com: Resizable table columns with jQuery

Answer 3

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

window.fixedColumns = new $.fn.dataTable.FixedColumns(table , { leftColumns: 3});  

//Events occur when changing column width.(paginate, sort , click, ...) 
// $('.sorting').click.... 
// $('.paginate_button').click.... 

$('.DTFC_Cloned').width();  
fixedColumns.fnRedrawLayout(); 

http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout