· 9 years ago · Nov 17, 2016, 10:46 AM
1require_once 'db.php';
2$CreateUsersTable = "CREATE TABLE IF NOT EXISTS `users` (
3 `id` INT(11) unsigned NOT NULL AUTO_INCREMENT,
4 `name` VARCHAR(255) NOT NULL DEFAULT 'student',
5 `marks` INT(11) NOT NULL DEFAULT 0,
6 PRIMARY KEY (`id`)
7)";
8$dbh->exec($CreateUsersTable);
9
10$stmt = $dbh->prepare('INSERT INTO users(name, marks) VALUES(:name, :marks)');
11
12for ($i = 1; $i <= 200; ++$i) {
13 $name = 'student'.$i;
14 $marks = rand(0, 100);
15 $stmt->execute(array(':name' => $name, ':marks' => $marks));
16}
17
18<!DOCTYPE html>
19<html>
20 <head>
21 <meta charset="utf-8">
22 <title>Pagination</title>
23 <link rel="stylesheet" href="bootstrap.css">
24 <link rel="stylesheet" href="base.css">
25 </head>
26 <body class="container">
27 <div class="row">
28 <div class="col-md-6">
29 <table id="rows" class="table table-hover table-condensed">
30 </table>
31 <ul id="page-numbers"></ul>
32 </div>
33 </div>
34
35
36 <script src="jquery-2.2.4.min.js"></script>
37 <script type="text/javascript">
38 $.expr[":"].containsExact = function (obj, index, meta, stack) {
39 return (obj.textContent || obj.innerText || $(obj).text() || "") == meta[3];
40 };
41 var rows_per_page = 10;
42 var total_rows;
43 function initPageNumbers()
44 {
45 $('#page-numbers').html('');
46 $.get('counttotal.php', function(data){
47 total_rows = parseInt(data.total_rows);
48 if (total_rows == 0){
49 $.get('seeder.php');
50 }
51 var count = 1;
52 for(var x = 0; x < total_rows; x += rows_per_page)
53 {
54 var html = [
55 '<li>',
56
57 '<a href="#' + count + '"' +
58 'onclick="getPage('+count+');">'+count+'</a>',
59
60 '</li>'
61 ].join("n");
62 $('#page-numbers').append(html);
63 count++;
64 }
65 });
66 }
67
68 function getPage(page_num)
69 {
70 $('#rows').html('');
71
72 $.get('paginate.php?page_num='+page_num, function(data){
73 $(data).each(function(){
74 var html = [
75 '<tr>',
76 '<td>' + '<span class="id" style="display:none;">'
77 + this.id + '</span>'
78 + this.name + '</td>',
79
80 '<td><div class="input-group">',
81 '<input type="text" class="marks form-control" name="marks" ' +
82 'value="' + this.marks + '">',
83 '</div></td>',
84
85 '</tr>'
86 ].join("n");
87 $('#rows').append(html);
88 });
89 });
90 }
91
92 function setupPage() {
93 initPageNumbers();
94
95 var page_num = 1;
96
97 if(window.location.hash !== '')
98 {
99 var hash_num = parseInt(window.location.hash.substring(1));
100
101 if(hash_num > 0)
102 {
103 page_num = hash_num;
104 }
105 }
106 getPage(page_num);
107 }
108
109 function changeValue(id, value) {
110 $("span.id:containsExact(" + id + ")").
111 closest("tr").
112 find("input.marks").
113 val(value)
114 }
115
116 function hasSuccess(id) {
117
118 var $obj = $("span.id:containsExact(" + id + ")").
119 closest("tr");
120 $obj.addClass('success');
121 window.setTimeout(function() {
122 $obj.removeClass('success');
123 }, 3 * 1000);
124 }
125
126 $(function() {
127
128 // I am running this every 10 seconds,
129 // but I want to run it only till all
130 // the data has loaded completely once.
131 (function(){
132 console.log("Calling setupPage() again!");
133 setupPage();
134 setTimeout(arguments.callee, 1000 * 10);
135 })();
136
137 $(document).on("change", "input[type='text']", function(e) {
138 var currentid = parseInt($(this).closest("tr")
139 .find("span.id").text()
140 );
141 var changedvalue = this.value;
142 $.post(
143 "test.php",
144 { id: currentid, marks: changedvalue },
145 function( data ) {
146 changeValue(data.id, data.marks);
147 hasSuccess(data.id);
148 },
149 "json"
150 );
151 });
152 });
153 </script>
154 </body>
155</html>
156
157<?php
158require_once 'db.php';
159$stmt = $dbh->query('SELECT COUNT(`id`) AS `total_rows` FROM `users`');
160$result = $stmt->fetch();
161header('Content-type: application/json');
162echo json_encode($result);