Разбить строки таблицы с помощью jQuery - PullRequest
Новая
       27

Разбить строки таблицы с помощью jQuery

0 голосов
/ 27 сентября 2018

Мы работаем с Customer Portal в Dynamics 365. Мне нужно использовать плагин для разбивки на страницы с существующими данными в таблице HTML.

Текущий код: 

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

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

Во время копания в Интернете я обнаружил, что есть несколько плагинов для достижения нумерации страниц, но их источником данных часто является массив объектов.Здесь я должен разбить на страницы определенные строки (<tr>).

Я пробовал до сих пор: 

rows = [];
$('table:first tbody tr').each(function(i, row) {
    rows.push(row);
});
recordsPerPage = 20;
pages = Math.ceil(rows.length / recordsPerPage);

Прежде чем написать несколько строк, я хотел бы знать, если кто-то знает оплагин для разбивки на страницы только того, что rows содержит.

Например, я мог бы использовать плагин Pagination.js , как в документации : 

dataSource: function(done){
    var result = [];
    for (var i = 0; i < rows.length; i++) {
        result.push(rows[i]);
    }
    done(result);
}

Верно?

Заранее спасибо

1 Ответ

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

После долгих исследований я нашел возможное решение с Pagination.js . 

let rows = []
$('table tbody tr').each(function(i, row) {
	return rows.push(row);
});

$('#pagination').pagination({
    dataSource: rows,
    pageSize: 1,
    callback: function(data, pagination) {
        $('tbody').html(data);
    }
})
table {
  border: 1px solid black;
}
th, td {
  border: 1px solid black;
}
td {
  padding: 5px;
}

#pagination {
  width: 100%;
  text-align: center;
}

#pagination ul li {
  display: inline;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody id="data-container">
    <tr>
      <td>Column 1: Row 1</td>
      <td>Column 2: Row 1</td>
      <td>Column 3: Row 1</td>
      <td>Column 4: Row 1</td>
    </tr>
    <tr>
      <td>Column 1: Row 2</td>
      <td>Column 2: Row 2</td>
      <td>Column 3: Row 2</td>
      <td>Column 4: Row 2</td>
    </tr>
    <tr>
      <td>Column 1: Row 3</td>
      <td>Column 2: Row 3</td>
      <td>Column 3: Row 3</td>
      <td>Column 4: Row 3</td>
    </tr>
  </tbody>
</table>
<div id="pagination"></div>

Тем не менее, я не делаю эту работу, так как метод .pagination() не работает, даже если загружен скрипт с $.getScript('url', function() {}); или document.createElement('script') но я думаю это другой вопрос и пост ...

...