Как поместить следующую и предыдущую кнопку под HTML-таблицей для обработки содержимого, если оно превышает несколько строк? - PullRequest
Новая
       0

Как поместить следующую и предыдущую кнопку под HTML-таблицей для обработки содержимого, если оно превышает несколько строк?

0 голосов
/ 28 июня 2018

Я новичок в 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>

1 Ответ

0 голосов
/ 28 июня 2018

попробуйте

Используйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...