Last active
July 7, 2022 10:04
-
-
Save stokito/fae8b0524c4e22a7383cf05074a28ee5 to your computer and use it in GitHub Desktop.
bootstrap-table.com pagination with ajax call. Optionally filter with date range
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha256-YW7U7x59rUPZ3DWzQKbalM/9j2Cp8wapJVQPRxL4w1k=" crossorigin="anonymous"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-9SEPo+fwJFpMUet/KACSwO+Z/dKMReF9q4zFhU/fT9M=" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css" integrity="sha256-LeU0tzGXsUojxMQgTdjRB74+q8RQhqUQoobY4+76cY8=" crossorigin="anonymous"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" crossorigin="anonymous" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js" integrity="sha256-lQSRQ2EUXUKg2xkKTV+D0E3rACEAi1aI+809LI5drdc=" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div> | |
| <form id="refresh-form"> | |
| <div class="row row-cols-auto align-items-center"> | |
| <div class="col-2"> | |
| <select class="form-select" id="queryCategory" name="queryCategory" title="Category"> | |
| <option value="" selected>All Categories</option> | |
| <option value="cat1">Category 1</option> | |
| <option value="cat2">Category 2</option> | |
| </select> | |
| </div> | |
| <div class="col-auto"> | |
| <input class="form-control" type="datetime-local" id="startDate" name="startDate" title="Start Date"/> | |
| </div> | |
| <div class="col-auto"> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="checkbox" id="startDateUtc" name="startDateUtc"> | |
| <label class="form-check-label" for="startDateUtc">UTC</label> | |
| </div> | |
| </div> | |
| <div class="col-auto"> | |
| <input class="form-control" type="datetime-local" id="endDate" name="endDate" title="End Date"/> | |
| </div> | |
| <div class="col-auto"> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="checkbox" id="endDateUtc" name="endDate"> | |
| <label class="form-check-label" for="endDateUtc">UTC</label> | |
| </div> | |
| </div> | |
| <div class="col-auto"> | |
| <button type="button" class="btn btn-primary" onclick="queryPages()">▶ Show</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div> | |
| <table id="pagedTbl" | |
| data-toggle="table" | |
| data-page-list="[25,50,200]" | |
| data-pagination="true"> | |
| <thead> | |
| <tr> | |
| <th data-field="Id">Id</th> | |
| <th data-field="Name">Name</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let $table = null | |
| let startDateStrIso = null | |
| let endDateStrIso = null | |
| let queryCategory = null | |
| let offset = 0 | |
| let limit = 25 | |
| window.onload = function () { | |
| $table = $('#pagedTbl').bootstrapTable() | |
| $table.on('page-change.bs.table', function (e, pageNum, pageSize) { | |
| console.log(e) | |
| offset = (pageNum - 1) * pageSize | |
| limit = pageSize | |
| fetchPage() | |
| }) | |
| } | |
| function getStartDate(datePickerId, datePickerUtcId) { | |
| let dateStr = document.getElementById(datePickerId).value | |
| if (dateStr === '') { | |
| return null | |
| } | |
| let dateUtc = document.getElementById(datePickerUtcId).checked | |
| if (dateUtc) { | |
| dateStr += 'Z' | |
| } | |
| return new Date(dateStr) | |
| } | |
| function fetchPage() { | |
| fetch(`http://localhost:8080/data?cat=${queryCategory}&start=${startDateStrIso}&end=${endDateStrIso}&offset=${offset}&limit=${limit}`, {credentials: 'include', referrerPolicy: 'no-referrer'}) | |
| .then(handleFetchError) | |
| .then((response) => response.json()) | |
| .then(function (data) { | |
| $table.bootstrapTable('load', data) | |
| }) | |
| .catch(function (e) { | |
| console.log("error", e) | |
| }) | |
| } | |
| function queryPages() { | |
| let startDate = getStartDate('startDate', 'startDateUtc') | |
| if (!startDate) { | |
| let today = new Date() | |
| today.setHours(0, 0, 0, 0) | |
| startDate = today | |
| } | |
| let endDate = getStartDate('endDate', 'endDateUtc') | |
| if (!endDate) { | |
| let tomorrow = new Date(startDate.getTime()) | |
| tomorrow.setDate(startDate.getDate() + 1) | |
| endDate = tomorrow | |
| } | |
| startDateStrIso = startDate.toISOString(); | |
| endDateStrIso = endDate.toISOString(); | |
| queryCategory = document.getElementById('queryCategory').value | |
| fetchPage() | |
| } | |
| function handleFetchError(response) { | |
| if (!response.ok) { | |
| throw Error(response.statusText) | |
| } | |
| return response | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment