Как сделать таблицу jQuery-нумерации - PullRequest
Новая
       38

Как сделать таблицу jQuery-нумерации

0 голосов
/ 03 октября 2018

Я пытаюсь создать jQuery-плагин для разбивки записей в таблице.В соответствии с моим собственным вопросом я пытался сделать вручную.

Также я пытаюсь выяснить, как отображать номера страниц в соответствии с buttonSize.

* 1007.*
$(document).ready(function() {
  $('#tabla').pagination({
    pageSize: 1,
    buttonSize: 5,
    target: '#paginacion',
    template: `<nav class="text-center" aria-label="Page navigation">
  <ul class="pagination" id="paginacion">
  </ul>
</nav>`
  });  
});

$.fn.extend({
  pagination: function($options) {
    $el = this;
    buttons = $options.buttonSize || 5;
    htmlElement = $($options.template);
    target = $(htmlElement).find($options.target);
    rows = $($el).find('tbody tr');
    initialPage = 1;
    
    pagesAmount = Math.ceil(rows.length / $options.pageSize);
    pages = [];
    
    while(rows.length > 0) {
      let page = rows.splice(0, $options.pageSize);
      pages.push(page);
    }
    
    window.pages = pages;
    window.currentPage = initialPage;
    
    for(i=0; i<pagesAmount; i++) {
      paginationHTML = `<li><a data-page="${i}" href="#">${i+1}</a></li>`;
      target.append(paginationHTML);
    }
    $el.append(htmlElement);
    $el.find('tbody').html(pages[window.currentPage-1]);
    
    let scriptCode = `$('${$options.target} a').on('click', function() {` + "\n\t" +
                        `window.currentPage = $(this).attr('data-page'); ` + "\n\t" +
                        `$('#${$el.attr('id')} tbody').html(window.pages[window.currentPage]); ` + "\n" +
                        `$(this).parent().parent().find('li').each(function(item) { $(this).removeClass('active'); })` + "\n" +
                        `$(this).parent().addClass('active')` + "\n" +
                      `});` + "\n"
    $('body').append($('<script>').html(scriptCode));
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tabla" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column1: Row 1</td>
      <td>Column2: Row 1</td>
      <td>Column3: Row 1</td>
      <td>Column4: Row 1</td>
    </tr>
    <tr>
      <td>Column1: Row 2</td>
      <td>Column2: Row 2</td>
      <td>Column3: Row 2</td>
      <td>Column4: Row 2</td>
    </tr>
    <tr>
      <td>Column1: Row 3</td>
      <td>Column2: Row 3</td>
      <td>Column3: Row 3</td>
      <td>Column4: Row 3</td>
    </tr>
    <tr>
      <td>Column1: Row 4</td>
      <td>Column2: Row 4</td>
      <td>Column3: Row 4</td>
      <td>Column4: Row 4</td>
    </tr>
    <tr>
      <td>Column1: Row 5</td>
      <td>Column2: Row 5</td>
      <td>Column3: Row 5</td>
      <td>Column4: Row 5</td>
    </tr>
    <tr>
      <td>Column1: Row 6</td>
      <td>Column2: Row 6</td>
      <td>Column3: Row 6</td>
      <td>Column4: Row 6</td>
    </tr>
    <tr>
      <td>Column1: Row 7</td>
      <td>Column2: Row 7</td>
      <td>Column3: Row 7</td>
      <td>Column4: Row 7</td>
    </tr>
    <tr>
      <td>Column1: Row 8</td>
      <td>Column2: Row 8</td>
      <td>Column3: Row 8</td>
      <td>Column4: Row 8</td>
    </tr>
  </tbody>
</table>

Я не использовал функции ES6, поскольку наша система основана на Microsoft и не будет работать в IE.

Я не уверенкак настроить размер кнопки, чтобы при наличии двухсот строк она не отображала двести страниц.

Есть предложения?

...