01.<!DOCTYPE html>
02.<html>
03.<head>
04. <title>custom-ajax</title>
05. <meta charset="utf-8">
06. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
07. <script src="jquery-3.3.1.min.js"></script>
08. <script src="bootstrap/css/bootstrap.min.css" rel="stylesheet"></script>
09. <script src="bootstrap/css/bootstrap.css" rel="stylesheet"></script>
10. <script src="bootstrap/js/bootstrap.min.js"></script>
11. <script src="bootstrap/css/bootstrap-responsive.css"></script>
12. <script src="bootstrap/css/bootstrap-responsive.min.css"></script>
14. <script src="bootstrap/js/bootstrap-table.js"></script>
15. <script src="bootstrap/js/bootstrap-table.css"></script>
16. <script src="bootstrap/js/examples.css"></script>
17.</head>
18.<body>
19. <div class="container">
20. <h1>Custom Ajax</h1>
21. <table id="table"
22. data-toggle="table"
23. data-height="460"
24. data-ajax="ajaxRequest"
25. data-search="true"
26. data-side-pagination="server"
27. data-pagination="true">
28. <thead>
29. <tr>
30. <th data-field="ProductID">ID</th>
31. <th data-field="ProductName">Item Name</th>
32. <th data-field="Price">Item Price</th>
33. </tr>
34. </thead>
35. </table>
36. </div>
37.<script>
38. var $table = $('#table');
39. var rows;
40.
41.
42. function ajaxRequest(params) {
43. $.ajax({
44. type: "POST",
45. url: "getData.php",
46. data: params.data,
47. dataType: "json",
48. success: function (rows) {
49. $(".fixed-table-loading").hide();
50. params.success({
51. "rows": rows.items,
52. "total": rows.total
53. })
54. },
55. error: function (er) {
56. params.error(er);
57. }
58. });
59. }
60. $table.bootstrapTable();
61.</script>
62.</body>
63.</html>
Load balance : Server 05
