个人中心
gpt4 book ai didi

javascript - 如果超过某些行，如何将下一个和上一个按钮放在html表格下方以处理内容？

转载 作者：行者123 更新时间：2023-11-30 20:24:26 25 4
gpt4 key购买 nike

我是 Ajax 新手。我无法理解我正在使用的 Ajax 函数。我有很多行内容的 html 表。我什至有用于处理内容的下一个和上一个按钮的代码。但是我需要下一个和上一个按钮显示在表格下方，但我有一个代码可以在上面的表格中显示它。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>jQuery: table pagination</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

    <script type="text/javascript">
    $(function(){
        $('table.paginated').each(function() {
            var currentPage = 0;
            var numPerPage = 3;
            var $table = $(this);
            $table.bind('repaginate', function() {
                $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
            });
            $table.trigger('repaginate');
            var numRows = $table.find('tbody tr').length;
            var numPages = Math.ceil(numRows / numPerPage);
            var $pager = $('<div class="pager"></div>');
            var $previous = $('<span class="previous"><<</spnan>');
            var $next = $('<span class="next">>></spnan>');
            for (var page = 0; page < numPages; page++) {
                $('<span class="page-number"></span>').text(page + 1).bind('click', {
                    newPage: page
                }, function(event) {
                    currentPage = event.data['newPage'];
                    $table.trigger('repaginate');
                    $(this).addClass('active').siblings().removeClass('active');
                }).appendTo($pager).addClass('clickable');
            }
            $pager.insertBefore($table).find('span.page-number:first').addClass('active');
            $previous.insertBefore('span.page-number:first');
            $next.insertAfter('span.page-number:last');

            $next.click(function (e) {
                $previous.addClass('clickable');
                $pager.find('.active').next('.page-number.clickable').click();
            });
            $previous.click(function (e) {
                $next.addClass('clickable');
                $pager.find('.active').prev('.page-number.clickable').click();
            });
            $table.on('repaginate', function () {
                $next.addClass('clickable');
                $previous.addClass('clickable');

                setTimeout(function () {
                    var $active = $pager.find('.page-number.active');
                    if ($active.next('.page-number.clickable').length === 0) {
                        $next.removeClass('clickable');
                    } else if ($active.prev('.page-number.clickable').length === 0) {
                        $previous.removeClass('clickable');
                    }
                });
            });
            $table.trigger('repaginate');
        });
    });
    </script>

    <style type="text/css">
        table {
        width: 40em;
        margin: 2em auto;
        }

        thead {
            background: #000;
            color: #fff;
        }

        td {
            width: 10em;
            padding: 0.3em;
        }

        tbody {
            background: #ccc;
        }

        div.pager {
            text-align: center;
            margin: 1em 0;
        }

        div.pager span {
            display: inline-block;
            width: 1.8em;
            height: 1.8em;
            line-height: 1.8;
            text-align: center;
            cursor: pointer;
            background: #000;
            color: #fff;
            margin-right: 0.5em;
        }

        div.pager span.active {
            background: #c00;
        }
    </style>
    <!-- TODO: Missing CoffeeScript 2 -->
</head>

<body>
  <table class="paginated">
    <thead>
        <tr>
            <th scope="col">A</th>
            <th scope="col">B</th>  
            <th scope="col">C</th> 
            <th scope="col">D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>hi</td>
            <td>hello</td>
            <td>test</td>
            <td>trial</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>         
    </tbody>
</table>
</body>
</html>

最佳答案

试试这个

使用 insertAfter 而不是 insertBefore 它的工作

$pager.insertAfter($table).find('span.page-number:first').addClass('active');

$(function() {
  $('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 3;
    var $table = $(this);
    $table.bind('repaginate', function() {
      $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pager"></div>');
    var $previous = $('<span class="previous"><<</spnan>');
    var $next = $('<span class="next">>></spnan>');
    for (var page = 0; page < numPages; page++) {
      $('<span class="page-number"></span>').text(page + 1).bind('click', {
        newPage: page
      }, function(event) {
        currentPage = event.data['newPage'];
        $table.trigger('repaginate');
        $(this).addClass('active').siblings().removeClass('active');
      }).appendTo($pager).addClass('clickable');
    }
    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
    $previous.insertBefore('span.page-number:first');
    $next.insertAfter('span.page-number:last');

    $next.click(function(e) {
      $previous.addClass('clickable');
      $pager.find('.active').next('.page-number.clickable').click();
    });
    $previous.click(function(e) {
      $next.addClass('clickable');
      $pager.find('.active').prev('.page-number.clickable').click();
    });
    $table.on('repaginate', function() {
      $next.addClass('clickable');
      $previous.addClass('clickable');

      setTimeout(function() {
        var $active = $pager.find('.page-number.active');
        if ($active.next('.page-number.clickable').length === 0) {
          $next.removeClass('clickable');
        } else if ($active.prev('.page-number.clickable').length === 0) {
          $previous.removeClass('clickable');
        }
      });
    });
    $table.trigger('repaginate');
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery: table pagination</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">



  <style type="text/css">
    table {
      width: 40em;
      margin: 2em auto;
    }
    
    thead {
      background: #000;
      color: #fff;
    }
    
    td {
      width: 10em;
      padding: 0.3em;
    }
    
    tbody {
      background: #ccc;
    }
    
    div.pager {
      text-align: center;
      margin: 1em 0;
    }
    
    div.pager span {
      display: inline-block;
      width: 1.8em;
      height: 1.8em;
      line-height: 1.8;
      text-align: center;
      cursor: pointer;
      background: #000;
      color: #fff;
      margin-right: 0.5em;
    }
    
    div.pager span.active {
      background: #c00;
    }
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->
</head>

<body>
  <table class="paginated">
    <thead>
      <tr>
        <th scope="col">A</th>
        <th scope="col">B</th>
        <th scope="col">C</th>
        <th scope="col">D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hi</td>
        <td>hello</td>
        <td>test</td>
        <td>trial</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

关于javascript - 如果超过某些行，如何将下一个和上一个按钮放在html表格下方以处理内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51079259/

25 4 0
文章推荐： c# - .Net 的 Rx : how to combine Scan with Throttle
文章推荐： javascript - React 同一组件的多个实例接收不同的数据
文章推荐： c# - 运算符重载报错
文章推荐： javascript - 仅当触发特定事件时，如何才能在谷歌分析中获得页面停留时间？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com