【问题标题】:How exclude <TR> table with jQuery?如何用 jQuery 排除 <TR> 表?
【发布时间】:2017-02-22 17:56:21
【问题描述】:

我用 jQuery 开发了一个分页表,一切正常

但我有一个问题,我的表包含一些我不需要计算它们的 TR

我在 tbody 表中使用 ID

jQuery 代码

$.fn.pageMe = function(opts) {
  var $this = this,
    defaults = {
      perPage: 7,
      showPrevNext: false,
      hidePageNumbers: false
    },
    settings = $.extend(defaults, opts);

  var listElement = $this;
  var perPage = settings.perPage;
  var children = listElement.children();
  var pager = $('.pager');

  if (typeof settings.childSelector != "undefined") {
    children = listElement.find(settings.childSelector);
  }

  if (typeof settings.pagerSelector != "undefined") {
    pager = $(settings.pagerSelector);
  }

  var numItems = children.size();
  var numPages = Math.ceil(numItems / perPage);

  pager.data("curr", 0);

  if (settings.showPrevNext) {
    $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
  }

  var curr = 0;
  // Added class and id in li start
  while (numPages > curr && (settings.hidePageNumbers == false)) {
    $('<li id="pg' + (curr + 1) + '" class="pg"><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
    curr++;
  }
  // Added class and id in li end

  if (settings.showPrevNext) {
    $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
  }

  pager.find('.page_link:first').addClass('active');
  pager.find('.prev_link').hide();
  if (numPages <= 1) {
    pager.find('.next_link').hide();
  }
  pager.children().eq(1).addClass("active");

  children.hide();
  children.slice(0, perPage).show();
  if (numPages > 3) {
    $('.pg').hide();
    $('#pg1,#pg2,#pg3').show();
    $("#pg3").after($("<li class='ell'>").html("<span>...</span>"));
  }

  pager.find('li .page_link').click(function() {
    var clickedPage = $(this).html().valueOf() - 1;
    goTo(clickedPage, perPage);
    return false;
  });
  pager.find('li .prev_link').click(function() {
    previous();
    return false;
  });
  pager.find('li .next_link').click(function() {
    next();
    return false;
  });

  function previous() {
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
  }

  function next() {
    goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
  }

  function goTo(page) {
    var startAt = page * perPage,
      endOn = startAt + perPage;

    // Added few lines from here start

    $('.pg').hide();
    $(".ell").remove();
    var prevpg = $("#pg" + page).show();
    var currpg = $("#pg" + (page + 1)).show();
    var nextpg = $("#pg" + (page + 2)).show();
    if (prevpg.length == 0) nextpg = $("#pg" + (page + 3)).show();
    if (prevpg.length == 1 && nextpg.length == 0) {
      prevpg = $("#pg" + (page - 1)).show();
    }
    if (curr > 3) {
      if (page > 1) prevpg.before($("<li class='ell'>").html("<span>...</span>"));
      if (page < curr - 2) nextpg.after($("<li class='ell'>").html("<span>...</span>"));
    }
    currpg.addClass("active").siblings().removeClass("active");

    // Added few lines till here end


    children.css('display', 'none').slice(startAt, endOn).show();

    if (page >= 1) {
      pager.find('.prev_link').show();
    } else {
      pager.find('.prev_link').hide();
    }

    if (page < (numPages - 1)) {
      pager.find('.next_link').show();
    } else {
      pager.find('.next_link').hide();
    }

    pager.data("curr", page);


  }
};


$(document).ready(function() {

  $('#myTable').pageMe({
    pagerSelector: '#myPager',
    showPrevNext: true,
    hidePageNumbers: false,
    perPage: 2
  });

});

因此,使用此代码将所有&lt;tr&gt; 放在我的表中,但我需要排除一些 tr 我该怎么做?

我尝试将 ID 提供给我需要但没有结果的 TR

【问题讨论】:

  • 为什么需要排除 TR? TR 在 tbody 中吗?你能把它们删掉吗?
  • @epascarello 是的,它在 tbody 中吗,如果您单击提供其他信息的按钮,我开发了一个包含信息的表格(这是我需要排除它的 TR)
  • @freedomn-m ID #myPager 在 UL(分页)中如果您需要什么,我可以添加代码
  • 例如,我给像 excl 这样的类我需要排除它的 TRs,接下来呢?

标签: javascript jquery html pagination html-table


【解决方案1】:

假设这是你的桌子:

<table id='myPager'>
  <tbody>
    <tr><td>row 1</td></td>
    <tr><td>row 2</td></td>
  </tbody>
</table>

你的代码可以:

$(opts.pagerSelector).find("tbody>tr").slice(1, 10).hide();

然后,为您要排除的行添加一个类,我将在此处使用“排除”,但您可能希望添加一个选项:

<table id='myPager'>
  <tbody>
    <tr><td>row 1</td></td>
    <tr><td class='excluded'>row 2</td></td>
  </tbody>
</table>

然后检查那个类:

$(opts.pagerSelector).find("tbody>tr:not(.excluded)").slice(1, 10).hide();

更新:来自问题中的其他详细信息:

改变

var children = listElement.children();

var children = listElement.children().not(".excluded");

【讨论】:

  • 如何将它添加到我的 jquery 代码中(在帖子中)?
  • 我将课程交给我的 TR,但我不知道我需要在我的 jQuery 代码中添加什么?
  • 您还没有提供.pageMe 的代码 - 这是在哪里定义的?
  • 没有什么可以添加到帖子中的 jquery 代码中,因为帖子中的 jquery 代码不会进行分页,它是通过插件调用“.pageMe”来设置的,你暗示你有通过断言“我开发一个分页表”来编写自己。
  • 更新了答案。不确定pager.children().eq(1).addClass("active"); 这一行,因为它不使用children var 并将第一行设置为活动 before 隐藏/显示它们,这似乎不正确。但所有其他人(我注意到)都正确使用了 var。
猜你喜欢
  • 1970-01-01
  • 2019-08-11
  • 2018-11-16
  • 2021-11-06
  • 2023-03-26
  • 1970-01-01
  • 2018-06-15
  • 2013-07-21
  • 1970-01-01
相关资源
最近更新 更多