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

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

<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>[email protected]</td>
        </tr>
    </tbody>
</table>

Используя этот script, я могу прокрутить 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

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

Ответ 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 в окне делает работу правильно.

forked fiddle → https://jsfiddle.net/k7err1vb/

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

Ну, когда-то был отличный плагин 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]
    },
    ...
})

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

Ответ 2

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

Вопрос был задан и ответил на StackOverflow.com уже здесь: Изменять размер столбцов таблицы с помощью jQuery

Ответ 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