phân trang ajax

config/consts.js

 'use strict';
 
 module.exports = {
+    PAGE_SIZE: 10,
     DB_TABLE: {
         TASKS: 'tasks'
     },

libs/utils.js

@@ -16,4 +16,100 @@ exports.getStatusName = function (code) {
     } else {
         return '';
     }
+}
+
+/**
+ * Hàm tạo link phân trang ở danh sách
+ *
+ * @param $totalRecord
+ * @param $pageSize
+ * @param $pageIndex
+ * @param $paginationName
+ * @returns {string}
+ */
+exports.genPaginationLink = function($totalRecord, $pageSize = 10, $pageIndex = 1, $paginationName = 'changePagination')
+{
+    var $pagination = "";
+
+    if ($pageIndex < 1) $pageIndex = 1;
+
+    if ($pageSize >= 1 && $pageIndex >= 1) {
+        var $adjacents = "2";
+        var $prev = $pageIndex - 1;
+        var $next = $pageIndex + 1;
+        var $lastpage = Math.ceil($totalRecord / $pageSize);
+        var $lpm1 = $lastpage - 1;
+    } else {
+        return $pagination;
+    }
+
+    var $counter=1;
+
+    if ($lastpage > 1) {
+        $pagination += "<div class='pagination'>";
+
+        if ($pageIndex > 1) {
+            $pagination += "<a href=\"#page=" + ($prev) + "\" onClick='" + $paginationName + "(" + ($prev) + ");'>&laquo;&nbsp;</a>";
+        } else {
+            $pagination += "<span class='disabled'>&laquo;&nbsp;</span>";
+        }
+
+        if ($lastpage < 7 + ($adjacents * 2)) {
+            for ($counter = 1; $counter <= $lastpage; $counter++) {
+                if ($counter == $pageIndex) {
+                    $pagination += "<span class='current'>"+$counter+"</span>";
+                } else {
+                    $pagination += "<a href=\"#page=" + ($counter) + "\" onClick='" + $paginationName + "(" + ($counter) + ");'>"+$counter+"</a>";
+                }
+            }
+        } else if ($lastpage > 5 + ($adjacents * 2)) {
+            if ($pageIndex < 1 + ($adjacents * 2)) {
+                for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++) {
+                    if ($counter == $pageIndex) {
+                        $pagination += "<span class='current'>"+$counter+"</span>";
+                    } else {
+                        $pagination += "<a href=\"#page=" + ($counter) + "\" onClick='" + $paginationName + "(" + ($counter) + ");'>"+$counter+"</a>";
+                    }
+                }
+                $pagination += "...";
+                $pagination += "<a href=\"#page=" + ($lpm1) + "\" onClick='" + $paginationName + "(" + ($lpm1) + ");'>$lpm1</a>";
+                $pagination += "<a href=\"#page=" + ($lastpage) + "\" onClick='" + $paginationName + "(" + ($lastpage) + ");'>"+$lastpage+"</a>";
+
+            } else if ($lastpage - ($adjacents * 2) > $pageIndex && $pageIndex > ($adjacents * 2)) {
+                $pagination += "<a href=\"#page=\"1\"\" onClick='" + $paginationName + "(1);'>1</a>";
+                $pagination += "<a href=\"#page=\"2\"\" onClick='" + $paginationName + "(2);'>2</a>";
+                $pagination += "...";
+                for ($counter = $pageIndex - $adjacents; $counter <= $pageIndex + $adjacents; $counter++) {
+                    if ($counter == $pageIndex) {
+                        $pagination += "<span class='current'>"+$counter+"</span>";
+                    } else {
+                        $pagination += "<a href=\"#page=" + ($counter) + "\" onClick='" + $paginationName + "(" + ($counter) + ");'>"+$counter+"</a>";
+                    }
+                }
+                $pagination += "..";
+                $pagination += "<a href=\"#page=" + ($lpm1) + "\" onClick='" + $paginationName + "(" + ($lpm1) + ");'>"+$lpm1+"</a>";
+                $pagination += "<a href=\"#page=" + ($lastpage) + "\" onClick='" + $paginationName + "(" + ($lastpage) + ");'>"+$lastpage+"</a>";
+            } else {
+                $pagination += "<a href=\"#page=\"1\"\" onClick='" + $paginationName + "(1);'>1</a>";
+                $pagination += "<a href=\"#page=\"2\"\" onClick='" + $paginationName + "(2);'>2</a>";
+                $pagination += "..";
+                for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++) {
+                    if ($counter == $pageIndex) {
+                        $pagination += "<span class='current'>"+$counter+"</span>";
+                    } else {
+                        $pagination += "<a href=\"#page=" + ($counter) + "\" onClick='" + $paginationName + "(" + ($counter) + ");'>"+$counter+"</a>";
+                    }
+                }
+            }
+        }
+
+        if ($pageIndex < $counter - 1) {
+            $pagination += "<a href=\"#page=" + ($next) + "\" onClick='" + $paginationName + "(" + ($next) + ");'> &raquo;</a>";
+        } else {
+            $pagination += "<span class='disabled'> &raquo;</span>";
+        }
+        $pagination += "</div><p>(Tổng số kết quả: " + $totalRecord + ")</p>";
+    }
+
+    return $pagination;
 }
\ No newline at end of file

modules/task/controllers/task.controller.js

@@ -3,37 +3,29 @@
 var async = require('async');
 var moment = require('moment');
 var utils = require(__libs_path + '/utils');
+var consts = require(__config_path + '/consts');
 var Task = require('../models/task.model');
 
+/**
+ * Hàm hiển thị form ds task
+ *
+ * @param req
+ * @param res
+ * @param next
+ */
 exports.showList = function(req, res, next) {
-    var skip = req.body.skip || 0;
-    var limit = req.body.limit || 10;
-    var key_word = '';
-
-    var input = {
-        key_word: key_word,
-        skip: skip,
-        limit: limit
-    };
-
-    async.waterfall([
-        function (cb) {
-            Task.getListing(input, function (err, res) {
-                if (err) return cb(err);
-                cb(null, res);
-            })
-        }
-    ], function (err, result) {
-        res.render('pages/task/index', {
-            title: 'Task list',
-            data: result,
-            moment: moment,
-            getPriorityName: utils.getPriorityName,
-            getStatusName: utils.getStatusName,
-        });
+    res.render('pages/task/index', {
+        title: 'Task list'
     });
 }
 
+/**
+ * Hàm xử lý thêm mới một task
+ *
+ * @param req
+ * @param res
+ * @param next
+ */
 exports.store = function (req, res, next) {
     var name = req.body.name;
     var priority = req.body.priority;
@@ -59,43 +51,56 @@ exports.store = function (req, res, next) {
     });
 }
 
+/**
+ * Hàm xử lý tìm kiếm theo ajax
+ *
+ * @param req
+ * @param res
+ * @param next
+ */
 exports.ajaxList = function (req, res, next) {
     var key_word = req.body.key_word;
     var priority = parseInt(req.body.priority || -1);
     var status = parseInt(req.body.status || -1);
+    var page_index = parseInt(req.body.page_index || 1);
 
     var input = {
         key_word: key_word,
         priority: priority,
         status: status,
-        skip: 0,
-        limit: 10
+        page_index: page_index
     };
 
     async.waterfall([
         function (cb) {
+            Task.getTotal(input, function (err, res) {
+                if (err) return cb(err);
+                if (res[0].hasOwnProperty('total_record')) {
+                    cb(null, res[0].total_record);
+                } else {
+                    cb(null, 0);
+                }
+            })
+        },
+        function (total_record, cb) {
             Task.getListing(input, function (err, res) {
                 if (err) return cb(err);
-                cb(null, res);
+                cb(null, {res:res, total_record:total_record});
             })
         }
     ], function (err, result) {
         res.render('pages/task/partials/ajax_list', {
-            data: result,
+            data: result.res,
+            pagination: utils.genPaginationLink(result.total_record, consts.PAGE_SIZE, page_index),
+            order_number: (page_index - 1)*consts.PAGE_SIZE,
             moment: moment,
             getPriorityName: utils.getPriorityName,
             getStatusName: utils.getStatusName
         });
     });
-
-
-
-
-
 }
 
 
-
 exports.delete = function (req, res, next) {
     console.log(req.body.id);
 }
\ No newline at end of file

modules/task/models/task.model.js

@@ -4,8 +4,16 @@ var db = require(__config_path + '/db');
 var consts = require(__config_path + '/consts');
 var moment = require('moment');
 
+/**
+ * Hàm lấy ds phân trang
+ *
+ * @param input
+ * @param callback
+ */
 exports.getListing = function (input, callback) {
-    console.log(input);
+    if (input.page_index < 1) input.page_index = 1;
+    var limit = consts.PAGE_SIZE;
+    var offset = (input.page_index - 1)*limit;
 
     let sql = 'SELECT T.* FROM ' + consts.DB_TABLE.TASKS + ' T WHERE T.id > 0 ';
 
@@ -23,14 +31,43 @@ exports.getListing = function (input, callback) {
     }
 
     sql += ' ORDER BY created_at DESC ';
-    sql += ' LIMIT ' + input.skip + ',' + input.limit;
+    sql += ' LIMIT ' + offset + ',' + limit;
 
-    var ss = db.query(sql, [], callback);
+    db.query(sql, [], callback);
 
-    console.log(ss.sql);
+}
+
+/**
+ * Hàm lấy tổng số bàn ghi theo đk tìm kiếm
+ *
+ * @param input
+ * @param callback
+ */
+exports.getTotal = function (input, callback) {
+    var sql = 'SELECT COUNT(T.id) AS total_record FROM ' + consts.DB_TABLE.TASKS + ' T WHERE T.id > 0 ';
+
+    if (input.key_word != '') {
+        sql += ' AND (T.name LIKE "%' + input.key_word + '%" ';
+        sql += ' OR T.description LIKE "%' + input.key_word + '%") ';
+    }
+
+    if (input.priority != -1) {
+        sql += ' AND T.priority = ' + input.priority;
+    }
+
+    if (input.status != -1) {
+        sql += ' AND T.status = ' + input.status;
+    }
 
+    db.query(sql, [], callback);
 }
 
+/**
+ * Hàm thêm mới 1 task
+ *
+ * @param data
+ * @param callback
+ */
 exports.store = function (data, callback) {
     let sql = 'INSERT INTO ' + consts.DB_TABLE.TASKS + ' SET ?';
     db.query(sql, {

public/stylesheets/pagination.css

+div.pagination {
+    padding: 3px;
+    margin: 3px;
+    text-align:center;
+}
+
+div.pagination a {
+    padding: 2px 5px 2px 5px;
+    margin: 2px;
+    border: 1px solid #3c8dbc;
+
+    text-decoration: none; /* no underline: #00908c */
+    color: #3c8dbc;
+}
+div.pagination a:hover, div.digg a:active {
+    border: 1px solid #3c8dbc;
+
+    color: #000;
+}
+div.pagination span.current {
+    padding: 2px 5px 2px 5px;
+    margin: 2px;
+    border: 1px solid #3c8dbc;
+
+    font-weight: bold;
+    background-color: #3c8dbc;
+    color: #FFF;
+}
+div.pagination span.disabled {
+    padding: 2px 5px 2px 5px;
+    margin: 2px;
+    border: 1px solid #EEE;
+
+    color: #DDD;
+}

views/pages/task/index.ejs

@@ -12,6 +12,8 @@
 
 <script>
     $(document).ready(function () {
+        $('#data-loading').hide();
+
         var url_ajax = '/task/ajax-list';
 
         filterBySelectBox('task_priority', url_ajax);
@@ -19,22 +21,31 @@
 
         var oldTimeout = '';
         $('#task_key_word').keyup(function(){
+            $('#data-loading').show();
+
             clearTimeout(oldTimeout);
             oldTimeout = setTimeout(function(){
-                getPageByAjax(url_ajax, 0);
+                getPageByAjax(url_ajax, 1);
             }, 250);
         });
 
-        getPageByAjax(url_ajax, 0);
+        changePagination(1);
     });
 
     function filterBySelectBox(id, url_ajax){
         $('#'+id).change(function(){
-            getPageByAjax(url_ajax, 0);
+            getPageByAjax(url_ajax, 1);
         });
     }
 
+    function changePagination(pageId) {
+        var url_ajax = '/task/ajax-list';
+        getPageByAjax(url_ajax, pageId);
+    }
+
     function getPageByAjax(url_ajax, pageId) {
+        $('#data-loading').show();
+
         var key_word = $('#task_key_word').val();
         var priority = $('#task_priority').val();
         var status = $('#task_status').val();
@@ -47,12 +58,15 @@
                 priority: priority,
                 status: status,
                 skip: 0,
-                limit: 10
+                limit: 10,
+                page_index: pageId
             },
             success: function(result) {
                 $('#ajax_list').html(result);
+                $('#data-loading').hide();
             },
             error: function (jqXhr, textStatus, errorMessage) {}
         });
     }
+
 </script>

views/pages/task/partials/ajax_list.ejs

+<div style="text-align: center; margin-bottom: 10px" id="data-loading">
+    <i class="fa fa-refresh fa-spin" style="font-size: 30px;"></i> Đang tải dữ liệu...
+</div>
 <table class="table table-striped table-bordered">
     <thead class="thead-dark">
     <tr>
+        <th class="text-center" scope="col">TT</th>
         <th class="text-center" scope="col">#ID</th>
         <th class="text-center" scope="col">Tên công việc</th>
         <th class="text-center" scope="col">Độ ưu tiên</th>
@@ -11,12 +15,15 @@
     </thead>
     <tbody>
     <% if (data.length > 0) { %>
+    <% var index=0; %>
     <% data.forEach(function(item){ %>
+    <% index++; %>
     <tr>
+        <td class="text-center" scope="row"><%= (order_number + index) %></td>
         <td class="text-center" scope="row"><%= item.id %></td>
         <td><%= item.name %></td>
         <td><%= getPriorityName(item.priority) %></td>
-        <td>
+        <td class="text-center">
             <% if (item.status == 0) { %>
             <i class="fa fa-edit" style="color: red; font-size: 20px"></i>
             <% } else { %>
@@ -43,4 +50,5 @@
         </tr>
     <% } %>
     </tbody>
-</table>
+</table>
\ No newline at end of file
+<div class="text-center"><%- pagination %></div>
\ No newline at end of file

views/partials/head.ejs

@@ -7,4 +7,5 @@
 <link href="/bootstrap_4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
 <link href="/bootstrap_4.3.1/css/jumbotron.css" rel="stylesheet">
+<link href="/stylesheets/pagination.css" rel="stylesheet">
 <script src="/javascripts/jquery-3.3.1.min.js"></script>
\ No newline at end of file