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

时间:2015-10-03 00:13:10

标签: javascript jquery datatables

我正在使用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
});

1 个答案:

答案 0 :(得分:0)

  

<强>原因

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