Одиночный выбор флажка с данными JQuery

Question

В jquery datatable должен быть установлен один флажок.

Эта ссылка работает нормально.

Но выше ссылка использует jquery.dataTables 1.10.16 версия. И я использую jquery.dataTables 1.9.4.

Возможны ли те же функции, что указаны в приведенном выше примере, с jquery.dataTables 1.9.4 вместо jquery.dataTables 1.10.16?

Answer 1

Возможны ли те же функции, что указаны в приведенном выше примере, с jquery.dataTables 1.9.4 вместо jquery.dataTables 1.10.16?

Да.

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

Для 1,9.4, возможное решение будет следующим:

$(document).ready(function() {
  $('#example').find("td input[type='checkbox']").click(function() {
    selectRow(this);
  });

  var table = $('#example').DataTable();

  function selectRow(clickedCheckBox) {
    var currentPage = table.fnPagingInfo().iPage;

    // Being unchecked
    if (!$(clickedCheckBox).is(':checked')) {
      $(clickedCheckBox).removeAttr('checked');
      getRow(clickedCheckBox).removeClass('selected');
      return;
    }

    var selectEntries = $("#example_length").find("select");
    var showEntriesCount = selectEntries.val();
    var totalRows = table.fnGetData().length;

    // If show entries != totalRows append total rows opiton that can be selected
    if (totalRows != showEntriesCount)
      selectEntries.append($('<option>', {
        value: totalRows,
        text: totalRows
      }));

    // Display all rows
    selectEntries.val(totalRows).trigger("change");

    // Removes all checked attribute from all the rows
    $("#example").find("td input[type='checkbox']").each(function(value, key) {
      getRow(key).removeClass('selected');
      $(key).removeAttr('checked');
    });

    // Check the clicked checkBox
    $(clickedCheckBox).prop('checked', true);
    getRow(clickedCheckBox).addClass('selected');

    // Re set the show entries count
    selectEntries.val(showEntriesCount).trigger("change");

    // If added, Remove the additional option added to Show Entries
    if (totalRows != showEntriesCount)
      selectEntries.find("[value='" + totalRows + "']").remove();

    // Go to the page on which the checkbox was clicked
    table.fnPageChange(currentPage);
  }

  function getRow(element) {
    return $(element).parent().parent();
  }
});

---

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

---

JSFiddle

Answer 2

К сожалению, устаревшая таблица данных не поддерживает или не имеет этого расширения выбора.

Обходной путь:

1. Создать элемент флажка внутри обратного вызова mRender.
2. Bindдействие на флажок.(Это может быть сделано внутри fnRowCallback или снаружи, как в моем примере ниже fiddle

https://jsfiddle.net/Rohith_KP/dwcatt9n/1/

 $(document).ready(function() {
  var userData = [
    ["1", "Email", "Full Name", "Member"],
    ["2", "Email", "Full Name", "Member"]
  ];

  var table = $('#example').DataTable({
    'data': userData,
    'columnDefs': [{
      'targets': 0,
      'className': 'dt-body-center',
      'mRender': function(data, type, full, meta) {
        return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
      }
    }],
    'order': [1, 'asc']
  });

  $('#example tr').click(function() {
    if ($(this).hasClass('row_selected'))
      $(this).removeClass('row_selected');
    else
      $(this).addClass('row_selected');
  });
});

Кроме того, я предлагаю вам обновить версию с данными. ЗатемВы можете использовать это расширение выбора.

Answer 3

Вы пробовали приведенный ниже код, и я проверил, и он работает нормально, вам нужно обновить стили и скрипты: вы должны обновить последние стили и скрипты для достижения последней функциональности. Одиночный выбор флажка с данными jquery

Answer 4

На той же странице, на которую вы даете ссылку, есть много объяснений по поводу использования операции «единой проверки».

В конце указанного вложения вы можете увидеть указанный файл .js:

https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js

На вашей странице вы должны добавить ссылку на этот файл после dataTable.js.

Я думаю, версия jquery не важна. Важный файл - "dataTables.select.js"!

Во-вторых, вы должны обновить коды создателя dataTable, как показано в примере ниже;

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child' // this line is the most importan!
        },
        order: [[ 1, 'asc' ]]
    } );
} );

ОБНОВЛЕНИЯ:

Почему вы не пытаетесь написать свою собственную функцию выбора?

например;

$(document).ready(function() {
    $('#example').DataTable( {
            /// put your options here...
        } );

    $('#example').find("tr").click(function(){ CheckTheRow(this); });
} );

function CheckTheRow(tr){
    if($(tr).find("td:first").hasClass("selected")) return;

    // get the pagination row count
    var activePaginationSelected = $("#example_length").find("select").val();

    // show all rows
    $("#example_length").find("select").val(-1).trigger("change");

    // remove the previous selection mark
    $("#example").find("tr").each(function(i,a){
         $(a).find("td:first").removeClass("selected");
         $(a).find("td:first").html("");
     });

     // mark the picked row
     $(tr).find("td:first").addClass("selected");
     $(tr).find("td:first").html("<i class='fa fa-check'></i>");

     // re turn the pagination to first stuation
     $("#example_length").find("select")
                         .val(activePaginationSelected).trigger("change");

}