javascript - Paginate table rows with jQuery - Stack Overflow

admin管理员组

文章数量:1431398

We are working with Customer Portal in Dynamics 365. I have to use a pagination plugin with existant data in the HTML table.

The current code:

<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>

Here there are more than one hundred of records. I have to include a pagination area in the bottom to allow users to paginate the table.

While digging on internet I saw there are several plugins to achieve pagination but their data source are often an object array. Here I have to paginate specific rows (<tr>).

I have tried so far:

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

Before I write a bunch of lines I would like to know if someone knows about a plugin to paginate only what rows contain.

For example I could use plugin Pagination.js like the documentation says:

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

Right?

Thanks in advance

We are working with Customer Portal in Dynamics 365. I have to use a pagination plugin with existant data in the HTML table.

The current code:

<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>

Here there are more than one hundred of records. I have to include a pagination area in the bottom to allow users to paginate the table.

While digging on internet I saw there are several plugins to achieve pagination but their data source are often an object array. Here I have to paginate specific rows (<tr>).

I have tried so far:

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

Before I write a bunch of lines I would like to know if someone knows about a plugin to paginate only what rows contain.

For example I could use plugin Pagination.js like the documentation says:

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

Right?

Thanks in advance

• javascript
• jquery
• html
• pagination
• dynamics-crm

Share Improve this question Follow asked Sep 27, 2018 at 15:26 Martin FernandezMartin Fernandez 37611 gold badge55 silver badges1818 bronze badges 4

• you might want to check out datatables.js – Aron Commented Sep 28, 2018 at 14:03
• I would suggest try using different framework to build your HTML and then in turn pulling data and displaying it. For example Knockout.js is a good Framework to look into. Here is the Link Here is one of my Fiddle I worked on it has Paging and most of the necessary stuff. – AnkUser Commented Oct 1, 2018 at 5:46
• @Aron, I know datatables, but they don't allow an already built table, or HTML rows. – Martin Fernandez Commented Oct 1, 2018 at 11:50
• @AnkUser, I can't just change the framework. Already solved anyway. – Martin Fernandez Commented Oct 1, 2018 at 11:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

After a lot of researching I found a posible solution with 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://pagination.js/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>

Still, I don't make this work since the .pagination() method is not working even if loaded the script with $.getScript('url', function() {}); or document.createElement('script') but I think this is a different issue and post...

本文标签： javascriptPaginate table rows with jQueryStack Overflow