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

Question

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

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

Кажется, DataTables создает другую таблицу, клонированную из основной, при создании этого замороженного столбца.

Вот инициализация для таблицы:

scope.TableData = $('#tableData').DataTable({
    rowReorder: {
        selector: 'td:first-child',
        update: false,
    },
    paging: true,
    fixedColumns: {
        rightColumns: 1,
        leftColumns: 0
    },
    select: {
        style: 'os',
        selector: 'td:nth-child(2)'
    },
    "search": {
        "regex": true
    },
    order: [[1, 'asc']],
    'filter': true,
    'scrollX': true,
    'bInfo': true,
    'scrollCollapse': true,
    scroller: {
        rowHeight: 20
    },
    'columnDefs': [
        { className: 'select-checkbox', targets: 1 },
        { className: 'reorder', targets: 0, orderable: true },
        { orderable: false, targets: -1 }
    ],
    "order": [],
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "language": {
        "lengthMenu": "@Html.ResStr("DataRowLengthMenu")",
        "zeroRecords": "@Html.ResStr("DataRowEmpty")",
        "info": "@Html.ResStr("DataRowInfo")",
        "infoEmpty": "@Html.ResStr("DataRowEmpty")",
        "infoFiltered": "@Html.ResStr("DataRowFilter")",
        "search": "",
        "processing": "<span style=\"color: dodgerblue; font-weight: bold;\">@Html.ResStr("PleaseWait")</span>",
        "lengthMenu": "@Html.ResStr("DataRowLengthMenu")<br><br>",
        "paginate": {
            "next": "@Html.ResStr("DataRowNext")",
            "previous": "@Html.ResStr("DataRowPrevious")"
        },
        select: {
            rows: {
                _: "@Html.ResStr("DataRowsSelected")",
                0: "",
                1: "@Html.ResStr("DataRowSelected")"
            }
        }
    }
});

(Не против @Html.ResStr, javascript в ASP MVC)

Вот анимированный GIF задачи:

Как видите, работает нормально при перетаскивании строки через столбец «Seq», но я не могу нажимать кнопки в замороженном столбце, потому что это вызывает событие перетаскивания.

Вот скрипка, в которой есть проблема. Нажмите на кнопки в строках, вы увидите.

https://jsfiddle.net/1qod8mLx/2/

Answer 1

Я изменил выбранное с td:first-child на td[name="reorder"] в качестве выбора.А в HTML, добавленном name="reorder" к желаемому td, этот способ позволяет применить перетаскивание к любому желаемому td.

var table = $('#tableData').DataTable({
    rowReorder: {
      selector: 'td[name="reorder"]',
      update: false,
    },
    paging: true,
    fixedColumns: {
      rightColumns: 1,
      leftColumns: 0
    },
    select: {
      style: 'os',
      selector: 'td:nth-child(2)'
    },
    "search": {
      "regex": true
    },
    'filter': true,
    'scrollX': true,
    'bInfo': true,
    'scrollCollapse': true,
    scroller: {
      rowHeight: 20
    },
    'columnDefs': [{
        className: 'select-checkbox',
        targets: 1
      },
      {
        className: 'reorder',
        targets: 0,
        orderable: true
      },
      {
        orderable: false,
        targets: -1
      }
    ],
    "order": []
  });

Пример строки в таблице:

     <tr>
        <td name="reorder">1</td>
        <td style="line-height: 20px; height: 20px; vertical-align: middle;"></td>
        <td>1</td>
        <td>Lead</td>
        <td>#1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        <td>a@a.com</td>
        <td>444-333-2222</td>
        <td align="center" style="background-color: #e6e6e6;vertical-align: middle">
          <button class="btn btn-sm btn-default btn-edit-row"><span class="glyphicon glyphicon-pencil"></span></button>
          <button class="btn btn-sm btn-default btn-delete-row"><span class="glyphicon glyphicon-trash"></span></button>

        </td>
      </tr>

Смотрите эту скрипку: https://jsfiddle.net/Lfrxujgv/