Question

我正在使用DataTables和validationEngine插件。

我的问题是我只能知道在分页的特定页面上选择了哪些行。因此，如果我在分页的第二页上选择了行并且在第一页上没有选择任何行，则会显示错误“请选择一行”。

我已经阅读了有关它的帖子，但并不特定于我的代码，所以这就是我提出这个问题的原因。

所以除了我的验证代码之外，我还应该添加以下代码，

CODE

$("#mSelector").on("click", "button[name='next'],button[name='finish']",               
function() {
var $stepSelector = $(".WizardStep:visible"); // get current step               

 var anyError = false;                      
 $stepSelector .find("input,textarea,select").each(function () {
 if (!$(this).validationEngine('validate')) {// validate every input element inside this step
           anyError = true;
    }

 });

 if (anyError)
  return false; // exit if any error found

}）;

CODE

$(function () {
        var singleSelect =  $('.single-select').DataTable({
            'lengthMenu': ['300']
        });

        // Single row select
        $('.single-select tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                $('#hId').val('');
            } else {
                singleSelect.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#Id').val($(this).attr('id'));
            }
        });

        var cId = $('#hdId').val();

        if (cId > 0) {
            $("#grid1.single-select")
                .find("[id='" + currentId + "']")
                .addClass('selected');
        }

        //selection
        var mGrid = $("#mSelector").DataTable({
            'lengthMenu': ['300']

        });
        $('#mSelector tbody').on('click', 'tr', function () {

            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                $('#mId').val('');

            } else {
                mGrid.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#mId').val($(this).attr('id'));
            } 

        });

CODE

$("button[name='next'],button[name='finish']").click(function() {
  var $step = $(".Step:visible"); // get current step

  var ifError = false;

  $step.find("input,textarea,select").each(function() {
    if (!$(this).validationEngine('validate')) { // validate 
      ifError = false;
    }
  });

  if (ifError)
    return false; // exit if there is an error
});

Answer 1

<强>原因

DataTables出于各种原因从DOM中删除不可见的行，因此当您附加事件处理程序时，它仅适用于当前可见的元素。

<强>解

您需要通过在on()调用中提供选择器作为第二个参数来使用事件委派。

替换此代码：

$("button[name='next'],button[name='finish']").click(function() {
   // ... skipped ...
});

带

$("#mSelector").on("click", "button[name='next'],button[name='finish']", function() {
   // ... skipped ...
});

其中mSelector是您的表格ID。

来自jQuery on()方法文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

有关详细信息，请参阅jQuery on()方法文档中的“直接和委派事件”和jQuery DataTables – Why click event handler does not work。

如何知道我的数据表中是否选择了任何行？

1 个答案: