Блог

Я использую таблицы данных и библиотеку columns для изменения размера столбцов. В библиотеке columns size «mousedown» по th умолчанию предотвращает. Подключаемый модуль ColReorderWithResize

        $(nTh)
            .on( 'mousedown.ColReorder', function (e) {
                e.preventDefault();
                if (e.which == 1) {
                    that._fnMouseDown.call( that, e, nTh, i );
                }
            } )
            .on( 'touchstart.ColReorder', function (e) {
                that._fnMouseDown.call( that, e, nTh, i );
            } );
  

Хотя я использую event.stopPropagation() для полей ввода заголовка таблицы, они по-прежнему недоступны для просмотра. Однако я могу просматривать вкладки и вводить текст внутри.
Есть ли способ исправить это без изменения / взлома родительской библиотеки.

JSFiddle поможет в тестировании проблемы.

Чтобы решить вашу проблему, вам нужно .focus() ваш ввод при нажатии. Следовательно, вы можете написать и применить сортировку…

 $("#example > thead > tr > th:first").html("<input type='text' placeholder='Name'>")
var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',
    'dom': 'Rlfrtip',
    'colReorder': {
        'allowReorder': false
    }
});

$("#example > thead > tr > th:first input").on('click', function (e) {
    e.stopPropagation();
    $(this).focus();
}).on('input', function (e) {
    table.column(0).search(this.value, true).draw();
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jeffreydwalter/ColReorderWithResize@9ce30c640e394282c9e0df5787d54e5887bc8ecc/ColReorderWithResize.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th class="no-sort">Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>  

Найдено рабочее решение. Поскольку событие библиотеки срабатывает при наведении курсора мыши, добавил его в качестве прослушивателя при вводе.

 $('input', table.column(colIdx).header()).on('mousedown click', function(e) {
  e.stopPropagation();
});
  

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