Ajout pagination logs

ajax.php

@@ -16,6 +16,7 @@
     
     // Selection des données
     if(isset($_POST['select'])){
+        
         // User pouvant se connecter au VPN
         if($_POST['select'] == "user"){
             $req = $bdd->prepare('SELECT * FROM user');
@@ -42,11 +43,24 @@
         }
         // Log du VPN
         else if($_POST['select'] == "log"){
-            $req = $bdd->prepare('SELECT * FROM log');
+            // Création du LIMIT de la requête SQL en fonction de la page
+            if(isset($_POST['pageIndex'], $_POST['pageSize'])) {
+                $page_actuelle = ($_POST['pageIndex']-1) * $_POST['pageSize'];
+                $page_max = $_POST['pageSize'];
+                $page = " LIMIT " . $page_actuelle . ", " . $page_max;
+            }
+            else {
+                $page = "";
+            }
+            
+            // Sélection des logs
+            $string_requete = 'SELECT * FROM log ORDER BY log_id DESC' . $page;
+            $req = $bdd->prepare($string_requete);
             $req->execute();
             
-            if($data = $req->fetch()) {               
+            $list = array();
-                do{
+                        
+            while($data = $req->fetch()) {
                 // C'est mieux exprimé en Mo ou Ko
                 $received = ($data['log_received'] > 100000) ? $data['log_received']/100000 . " Mo" : $data['log_received']/100 . " Ko";
                 $sent = ($data['log_send'] > 100000) ? $data['log_send']/100000 . " Mo" : $data['log_send']/100 . " Ko";
@@ -55,7 +69,8 @@
                 $end_time_array = explode(' ', $data['log_end_time']);
                 $end_time = datefromsql($end_time_array[0]) . ' ' . $end_time_array[1];
                 
-                    $list[] = array("log_id" => $data['log_id'],
+                // On ajoute à notre tableau la nouvelle ligne de log
+                array_push($list, array("log_id" => $data['log_id'],
                                 "user_id" => $data['user_id'],
                                 "log_trusted_ip" => $data['log_trusted_ip'],
                                 "log_trusted_port" => $data['log_trusted_port'],
@@ -64,15 +79,18 @@
                                 "log_start_time" => $start_time,
                                 "log_end_time" => $end_time,
                                 "log_received" => $received,
-                                    "log_send" => $sent);
+                                "log_send" => $sent));
-                } while($data = $req->fetch());                      
+            }
             
-                echo json_encode($list);           
+            // Récupération du nombre lignes de log
-            }
+            $req_nb = $bdd->prepare('SELECT COUNT(*) AS nb FROM log');
-            else{
+            $req_nb->execute();
-                $list = array();
+            $data_nb = $req_nb->fetch()['nb'];
-                echo json_encode($list);   
+            
-            }
+            // On affiche la réponse JSON
+            $result = array('Total' => $data_nb, 'Rows' => json_encode($list)); 
+            
+            echo json_encode($result);
         }
         // Affichage des personnes pouvant se connecter à l'interface d'administration
         else if($_POST['select'] == "admin"){

css/dropkick.css

@@ -0,0 +1,201 @@
+/**
+ * Default DropKick theme
+ *
+ * Feel free to edit the default theme
+ * or even add your own.
+ *
+ * See the readme for themeing help
+ *
+ */
+
+/***** Begin Theme, feel free to edit in here! ******/
+
+/* One container to bind them... */
+.dk_container {
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
+  background: -moz-linear-gradient(top, #fff, #f5f5f5);
+  background: -o-linear-gradient(top, #fff, #f5f5f5);
+  background-color: #f5f5f5;
+  font-family: 'Helvetica', Arial, sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 14px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+}
+  .dk_container:focus {
+    outline: 0;
+  }
+  .dk_container a {
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+/* Opens the dropdown and holds the menu label */
+.dk_toggle {
+  /**
+   * Help: Arrow image not appearing
+   * Try updating this property to your correct dk_arrows.png path
+   */
+  background-image: url('../images/dk_arrows.png');
+  background-repeat: no-repeat;
+  background-position: 90% center;
+  border: 1px solid #ccc;
+  color: #333;
+  margin-top: 2px;
+  margin-left: 2px;
+  padding: 4px 2px 2px 4px;
+  text-shadow: #fff 1px 1px 0;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -webkit-transition: border-color .5s;
+  -moz-transition: border-color .5s;
+  -o-transition: border-color .5s;
+  transition: border-color .5s;
+}
+  .dk_toggle:hover {
+    border-color: #8c8c8c;
+  }
+  /* Applied when the dropdown is focused */
+  .dk_focus .dk_toggle {
+    border-color: #40b5e2;
+  }
+  .dk_focus .dk_toggle {
+    box-shadow: 0 0 5px #40b5e2;
+    -moz-box-shadow: 0 0 5px #40b5e2;
+    -webkit-box-shadow: 0 0 5px #40b5e2;
+  }
+
+/* Applied whenever the dropdown is open */
+.dk_open {
+  box-shadow: 0 0 5px #40b5e2;
+  -moz-box-shadow: 0 0 5px #40b5e2;
+  -webkit-box-shadow: 0 0 5px #40b5e2;
+  /**
+   * Help: Dropdown menu is covered by something
+   * Try setting this value higher
+   */
+  z-index: 10;
+}
+  .dk_open .dk_toggle {
+    background-color: #ececec;
+    border-color: #8c8c8c;
+    color: #ccc;
+    box-shadow: inset 0 -2px 5px #ccc;
+    border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    -webkit-border-radius: 5px 5px 0 0;
+  }
+
+/* The outer container of the options */
+.dk_options {
+  box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
+  -moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
+  -webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
+  border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+}
+  .dk_options a {
+    background-color: #fff;
+    border-bottom: 1px solid #999;
+    font-weight: bold;
+    padding: 8px 10px;
+  }
+  .dk_options li:last-child a {
+    border-bottom: none;
+  }
+  .dk_options a:hover,
+  .dk_option_current a {
+    background-color: #0084c7;
+    border-bottom-color: #004c72;
+    color: #fff;
+    text-decoration: none;
+    text-shadow: rgba(0, 0, 0, .5) 0 1px 0;
+  }
+
+/* Inner container for options, this is what makes the scrollbar possible. */
+.dk_options_inner {
+  border: 1px solid #8c8c8e;
+  border-bottom-width: 2px;
+  border-bottom-color: #999;
+  color: #333;
+  max-height: 250px;
+  text-shadow: #fff 0 1px 0;
+  border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+}
+
+/* Set a max-height on the options inner */
+.dk_options_inner,
+.dk_touch .dk_options {
+  max-height: 250px;
+}
+
+/******  End Theme ******/
+
+/***** Critical to the continued enjoyment of working dropdowns ******/
+
+.dk_container {
+  display: none;
+  float: left;
+  position: relative;
+}
+  .dk_container a {
+    outline: 0;
+  }
+
+.dk_toggle {
+  display: -moz-inline-stack;
+  display: inline-block;
+  *display: inline;
+  position: relative;
+  zoom: 1;
+}
+
+.dk_open {
+  position: relative;
+}
+  .dk_open .dk_options {
+    display: block;
+  }
+  .dk_open .dk_label {
+    color: inherit;
+  }
+
+.dk_options {
+  display: none;
+  margin-top: -1px;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+  .dk_options a,
+  .dk_options a:link,
+  .dk_options a:visited {
+    display: block;
+  }
+  .dk_options_inner {
+    overflow: auto;
+    position: relative;
+  }
+
+.dk_touch .dk_options {
+  overflow: hidden;
+}
+
+.dk_touch .dk_options_inner {
+  max-height: none;
+  overflow: visible;
+}
+
+.dk_fouc select {
+  position: relative;
+  top: -99999em;
+  visibility: hidden;
+}
+
+/***** End Critical to the continued enjoyment of working dropdowns ******/

css/enhancementpager.css

@@ -0,0 +1,124 @@
+.slick-enhancement-pager {
+  width: 100%;
+  height: 26px;
+  border: 1px solid gray;
+  border-top: 0;
+  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+  vertical-align: middle;
+  position: relative;
+}
+
+.button-base-class {
+  display: inline-block;
+  border: #CCC solid 1px;
+  margin: 4px;
+  width:16px;
+  height:16px;
+  cursor: pointer;
+  vertical-align: middle;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+.resultset_first{
+  background: url('../images/resultset_first.png') no-repeat;
+}
+
+.resultset_first:hover{
+  background: #CEF url('../images/resultset_first.png') no-repeat;
+}
+
+.resultset_prev{
+  background: url('../images/resultset_previous.png') no-repeat;
+}
+
+.resultset_prev:hover{
+  background: #CEF url('../images/resultset_previous.png') no-repeat;
+}
+
+.resultset_next{
+  background: url('../images/resultset_next.png') no-repeat;
+}
+
+.resultset_next:hover{
+  background: #CEF url('../images/resultset_next.png') no-repeat;
+}
+
+.resultset_last{
+  background: url('../images/resultset_last.png') no-repeat;
+}
+
+.resultset_last:hover{
+  background: #CEF url('../images/resultset_last.png') no-repeat;
+}
+
+.spacer{
+  width: 1px;
+  margin: 4px;
+  display: inline-block;
+  background: url('../images/spacer.png') no-repeat;
+}
+
+.refresh{
+  background: url('../images/arrow_refresh.png') no-repeat;
+}
+
+.refresh:hover{
+  background: #CEF url('../images/arrow_refresh.png') no-repeat;
+}
+
+.dataloading{
+  display: inline-block;
+  margin: 4px;
+  background: url('../images/ajax-loader.gif') no-repeat;
+  width:16px;
+  height:16px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.pageplus{
+  background: url('../images/pageplus.png') no-repeat;
+}
+
+.pageplus:hover{
+  background: #CEF url('../images/pageplus.png') no-repeat;
+}
+
+.pageminus{
+  background: url('../images/pageminus.png') no-repeat;
+}
+
+.pageminus:hover{
+  background: #CEF url('../images/pageminus.png') no-repeat;
+}
+
+.currentrecords{
+  position:absolute;right:0px;
+  background: url('../images/lightbulb.png') no-repeat;
+}
+
+.currentrecords:hover{
+  position:absolute;right:0px;
+  background: #CEF url('../images/lightbulb.png') no-repeat;
+}
+
+.pagerslider{
+  display:inline-block;
+  width:80px;
+  margin:4px 9px 4px 4px;
+  vertical-align: middle;
+}
+
+.recordsperpage{
+  display:inline-block;
+  vertical-align: middle;
+  width:80px;
+}
+
+.recordstate{
+  position:absolute;
+  top:6px;
+  right:26px;
+}

css/index.css

@@ -28,13 +28,17 @@ li {
   margin: 0;
 }
 
-.grid {
+.grid:not(#grid_log) {
   background: white;
   outline: 0;
   border: 1px solid gray;
   margin-bottom: 20px;
 }
 
+#pagination {
+  margin-bottom: 20px;
+}
+
 .grid-header {
   border: 1px solid gray;
   border-bottom: 0;

index.php

@@ -32,6 +32,8 @@
         <link rel="stylesheet" href="css/slick.grid.css" type="text/css" />
         <link rel="stylesheet" href="css/slick-default-theme.css" type="text/css" />
         <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" />
+        <link rel="stylesheet" href="css/dropkick.css" type="text/css" />
+        <link rel="stylesheet" href="css/enhancementpager.css" type="text/css" />
         <link rel="stylesheet" href="css/index.css" type="text/css"/>
     </head>
     <body>
@@ -75,6 +77,7 @@
                       <label>Logs</label>
                     </div>
                     <div class="grid" id="grid_log"></div>
+                    <div id="pagination" class="slick-enhancement-pager"></div>
                 </div>
                 
                 <div>
@@ -94,6 +97,11 @@
                 <script src="js/slick.formatters.js"></script>
                 <script src="js/slick.editors.js"></script>
                 <script src="js/slick.grid.js"></script>
+                
+                <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
+                <script type="text/javascript" src="js/jquery.dropkick-1.0.0.js" charset="utf-8"></script>
+                <script src="js/slick.enhancementpager.js"></script>
+                
                 <script src="js/index.js"></script>
                 
         <?php

js/index.js

@@ -164,69 +164,6 @@ $(function () {
         }
     });
 
-    // Selection des logs
-    $.ajax({
-        type: "POST",
-        url: "ajax.php",
-        dataType: 'json',
-        data: "select=log",
-        success: function (json) {
-            var
-                i,
-
-                // Header des colonnes
-                columns = [
-                    {id: "log_id", name: "Log ID", field: "log_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "user_id", name: "User ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_trusted_ip", name: "Trusted IP", field: "log_trusted_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_trusted_port", name: "Trusted Port", field: "log_trusted_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_remote_ip", name: "Remote IP", field: "log_remote_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_remote_port", name: "Remote Port", field: "log_remote_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_start_time", name: "Start Time", field: "log_start_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_end_time", name: "End Time", field: "log_end_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_received", name: "Receveid", field: "log_received", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
-                    {id: "log_send", name: "Sent", field: "log_send", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text}
-                ],
-
-                // Options de la grille
-                options = {
-                    editable: false,
-                    enableAddRow: false,
-                    enableCellNavigation: true,
-                    asyncEditorLoading: false,
-                    autoEdit: false,
-                    autoHeight: true
-                },
-
-                // Données de la grille des logs
-                data = [],
-                grid = null;
-
-            for (i = 0; i < json.length; i += 1) {
-                data[i] = {
-                    log_id: json[i].log_id,
-                    user_id: json[i].user_id,
-                    log_trusted_ip: json[i].log_trusted_ip,
-                    log_trusted_port: json[i].log_trusted_port,
-                    log_remote_ip: json[i].log_remote_ip,
-                    log_remote_port: json[i].log_remote_port,
-                    log_start_time: json[i].log_start_time,
-                    log_end_time: json[i].log_end_time,
-                    log_received: json[i].log_received,
-                    log_send: json[i].log_send
-                };
-            }
-
-            // Création de la grille
-            grid = new Slick.Grid($("#grid_log"), data, columns, options);
-
-            grid.autosizeColumns();
-        },
-        error: function () {
-            alert('Erreur dans la récupération des données...');
-        }
-    });
-
 
     // Selection des admins
     $.ajax({
@@ -371,4 +308,51 @@ $(function () {
             alert('Erreur dans la récupération des données...');
         }
     });
+    
+    
+    
+    // Sélection des logs
+    var
+    i,
+
+    // Header des colonnes
+    columns = [
+        {id: "log_id", name: "Log ID", field: "log_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "user_id", name: "User ID", field: "user_id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_trusted_ip", name: "Trusted IP", field: "log_trusted_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_trusted_port", name: "Trusted Port", field: "log_trusted_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_remote_ip", name: "Remote IP", field: "log_remote_ip", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_remote_port", name: "Remote Port", field: "log_remote_port", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_start_time", name: "Start Time", field: "log_start_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_end_time", name: "End Time", field: "log_end_time", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_received", name: "Receveid", field: "log_received", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text},
+        {id: "log_send", name: "Sent", field: "log_send", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text}
+    ],
+
+    // Options de la grille
+    options = {
+        editable: false,
+        enableAddRow: false,
+        enableCellNavigation: true,
+        asyncEditorLoading: false,
+        autoEdit: false,
+        autoHeight: true
+    },
+    
+    data = [],
+    
+    // Création de la grille
+    grid = new Slick.Grid($("#grid_log"), data, columns, options),
+
+    // Pagination
+    pager = new Slick.Controls.EnhancementPager({
+        container: $("#pagination"),
+        remoteUrl: "ajax.php",
+        params: {select: "log"},
+        datagrid: grid,
+        pagerType: ""
+    });
+
+    grid.autosizeColumns();
+    
 });

js/jquery.dropkick-1.0.0.js

@@ -0,0 +1,402 @@
+/**
+ * DropKick
+ *
+ * Highly customizable <select> lists
+ * https://github.com/JamieLottering/DropKick
+ *
+ * &copy; 2011 Jamie Lottering <http://github.com/JamieLottering>
+ *                        <http://twitter.com/JamieLottering>
+ * 
+ */
+(function ($, window, document) {
+
+  var ie6 = false;
+
+  // Help prevent flashes of unstyled content
+  if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
+    ie6 = true;
+  } else {
+    document.documentElement.className = document.documentElement.className + ' dk_fouc';
+  }
+  
+  var
+    // Public methods exposed to $.fn.dropkick()
+    methods = {},
+
+    // Cache every <select> element that gets dropkicked
+    lists   = [],
+
+    // Convenience keys for keyboard navigation
+    keyMap = {
+      'left'  : 37,
+      'up'    : 38,
+      'right' : 39,
+      'down'  : 40,
+      'enter' : 13
+    },
+
+    // HTML template for the dropdowns
+    dropdownTemplate = [
+      '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
+        '<a class="dk_toggle">',
+          '<span class="dk_label">{{ label }}</span>',
+        '</a>',
+        '<div class="dk_options">',
+          '<ul class="dk_options_inner">',
+          '</ul>',
+        '</div>',
+      '</div>'
+    ].join(''),
+
+    // HTML template for dropdown options
+    optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',
+
+    // Some nice default values
+    defaults = {
+      startSpeed : 1000,  // I recommend a high value here, I feel it makes the changes less noticeable to the user
+      theme  : false,
+      change : false
+    },
+
+    // Make sure we only bind keydown on the document once
+    keysBound = false
+  ;
+
+  // Called by using $('foo').dropkick();
+  methods.init = function (settings) {
+    settings = $.extend({}, defaults, settings);
+
+    return this.each(function () {
+      var
+        // The current <select> element
+        $select = $(this),
+
+        // Store a reference to the originally selected <option> element
+        $original = $select.find(':selected').first(),
+
+        // Save all of the <option> elements
+        $options = $select.find('option'),
+
+        // We store lots of great stuff using jQuery data
+        data = $select.data('dropkick') || {},
+
+        // This gets applied to the 'dk_container' element
+        id = $select.attr('id') || $select.attr('name'),
+
+        // This gets updated to be equal to the longest <option> element
+        width  = settings.width || $select.outerWidth(),
+
+        // Check if we have a tabindex set or not
+        tabindex  = $select.attr('tabindex') ? $select.attr('tabindex') : '',
+
+        // The completed dk_container element
+        $dk = false,
+
+        theme
+      ;
+
+      // Dont do anything if we've already setup dropkick on this element
+      if (data.id) {
+        return $select;
+      } else {
+        data.settings  = settings;
+        data.tabindex  = tabindex;
+        data.id        = id;
+        data.$original = $original;
+        data.$select   = $select;
+        data.value     = _notBlank($select.val()) || _notBlank($original.attr('value'));
+        data.label     = $original.text();
+        data.options   = $options;
+      }
+
+      // Build the dropdown HTML
+      $dk = _build(dropdownTemplate, data);
+
+      // Make the dropdown fixed width if desired
+      $dk.find('.dk_toggle').css({
+        'width' : width + 'px'
+      });
+
+      // Hide the <select> list and place our new one in front of it
+      $select.before($dk);
+
+      // Update the reference to $dk
+      $dk = $('#dk_container_' + id).fadeIn(settings.startSpeed);
+
+      // Save the current theme
+      theme = settings.theme ? settings.theme : 'default';
+      $dk.addClass('dk_theme_' + theme);
+      data.theme = theme;
+
+      // Save the updated $dk reference into our data object
+      data.$dk = $dk;
+
+      // Save the dropkick data onto the <select> element
+      $select.data('dropkick', data);
+
+      // Do the same for the dropdown, but add a few helpers
+      $dk.data('dropkick', data);
+
+      lists[lists.length] = $select;
+
+      // Focus events
+      $dk.bind('focus.dropkick', function (e) {
+        $dk.addClass('dk_focus');
+      }).bind('blur.dropkick', function (e) {
+        $dk.removeClass('dk_open dk_focus');
+      });
+
+      setTimeout(function () {
+        $select.hide();
+      }, 0);
+    });
+  };
+
+  // Allows dynamic theme changes
+  methods.theme = function (newTheme) {
+    var
+      $select   = $(this),
+      list      = $select.data('dropkick'),
+      $dk       = list.$dk,
+      oldtheme  = 'dk_theme_' + list.theme
+    ;
+
+    $dk.removeClass(oldtheme).addClass('dk_theme_' + newTheme);
+
+    list.theme = newTheme;
+  };
+
+  // Reset all <selects and dropdowns in our lists array
+  methods.reset = function () {
+    for (var i = 0, l = lists.length; i < l; i++) {
+      var
+        listData  = lists[i].data('dropkick'),
+        $dk       = listData.$dk,
+        $current  = $dk.find('li').first()
+      ;
+
+      $dk.find('.dk_label').text(listData.label);
+      $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);
+
+      _setCurrent($current, $dk);
+      _updateFields($current, $dk, true);
+    }
+  };
+
+  // Expose the plugin
+  $.fn.dropkick = function (method) {
+    if (!ie6) {
+      if (methods[method]) {
+        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+      } else if (typeof method === 'object' || ! method) {
+        return methods.init.apply(this, arguments);
+      }
+    }
+  };
+
+  // private
+  function _handleKeyBoardNav(e, $dk) {
+    var
+      code     = e.keyCode,
+      data     = $dk.data('dropkick'),
+      options  = $dk.find('.dk_options'),
+      open     = $dk.hasClass('dk_open'),
+      current  = $dk.find('.dk_option_current'),
+      first    = options.find('li').first(),
+      last     = options.find('li').last(),
+      next,
+      prev
+    ;
+
+    switch (code) {
+      case keyMap.enter:
+        if (open) {
+          _updateFields(current.find('a'), $dk);
+          _closeDropdown($dk);
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      case keyMap.up:
+        prev = current.prev('li');
+        if (open) {
+          if (prev.length) {
+            _setCurrent(prev, $dk);
+          } else {
+            _setCurrent(last, $dk);
+          }
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      case keyMap.down:
+        if (open) {
+          next = current.next('li').first();
+          if (next.length) {
+            _setCurrent(next, $dk);
+          } else {
+            _setCurrent(first, $dk);
+          }
+        } else {
+          _openDropdown($dk);
+        }
+        e.preventDefault();
+      break;
+
+      default:
+      break;
+    }
+  }
+
+  // Update the <select> value, and the dropdown label
+  function _updateFields(option, $dk, reset) {
+    var value, label, data;
+
+    value = option.attr('data-dk-dropdown-value');
+    label = option.text();
+    data  = $dk.data('dropkick');
+
+    $select = data.$select;
+    $select.val(value);
+
+    $dk.find('.dk_label').text(label);
+
+    reset = reset || false;
+
+    if (data.settings.change && !reset) {
+      data.settings.change.call($select, value, label);
+    }
+  }
+
+  // Set the currently selected option
+  function _setCurrent($current, $dk) {
+    $dk.find('.dk_option_current').removeClass('dk_option_current');
+    $current.addClass('dk_option_current');
+
+    _setScrollPos($dk, $current);
+  }
+
+  function _setScrollPos($dk, anchor) {
+    var height = anchor.prevAll('li').outerHeight() * anchor.prevAll('li').length;
+    $dk.find('.dk_options_inner').animate({ scrollTop: height + 'px' }, 0);
+  }
+
+  // Close a dropdown
+  function _closeDropdown($dk) {
+    $dk.removeClass('dk_open');
+  }
+
+  // Open a dropdown
+  function _openDropdown($dk) {
+    var data = $dk.data('dropkick');
+    $dk.find('.dk_options').css({ top : $dk.find('.dk_toggle').outerHeight() - 1 });
+    $dk.toggleClass('dk_open');
+
+  }
+
+  /**
+   * Turn the dropdownTemplate into a jQuery object and fill in the variables.
+   */
+  function _build (tpl, view) {
+    var
+      // Template for the dropdown
+      template  = tpl,
+      // Holder of the dropdowns options
+      options   = [],
+      $dk
+    ;
+
+    template = template.replace('{{ id }}', view.id);
+    template = template.replace('{{ label }}', view.label);
+    template = template.replace('{{ tabindex }}', view.tabindex);
+
+    if (view.options && view.options.length) {
+      for (var i = 0, l = view.options.length; i < l; i++) {
+        var
+          $option   = $(view.options[i]),
+          current   = 'dk_option_current',
+          oTemplate = optionTemplate
+        ;
+
+        oTemplate = oTemplate.replace('{{ value }}', $option.val());
+        oTemplate = oTemplate.replace('{{ current }}', (_notBlank($option.val()) === view.value) ? current : '');
+        oTemplate = oTemplate.replace('{{ text }}', $option.text());
+
+        options[options.length] = oTemplate;
+      }
+    }
+
+    $dk = $(template);
+    $dk.find('.dk_options_inner').html(options.join(''));
+
+    return $dk;
+  }
+
+  function _notBlank(text) {
+    return ($.trim(text).length > 0) ? text : false;
+  }
+
+  $(function () {
+
+    // Handle click events on the dropdown toggler
+    $('.dk_toggle').live('click', function (e) {
+      var $dk  = $(this).parents('.dk_container').first();
+
+      _openDropdown($dk);
+
+      if ("ontouchstart" in window) {
+        $dk.addClass('dk_touch');
+        $dk.find('.dk_options_inner').addClass('scrollable vertical');
+      }
+
+      e.preventDefault();
+      return false;
+    });
+
+    // Handle click events on individual dropdown options
+    $('.dk_options a').live(($.browser.msie ? 'mousedown' : 'click'), function (e) {
+      var
+        $option = $(this),
+        $dk     = $option.parents('.dk_container').first(),
+        data    = $dk.data('dropkick')
+      ;
+    
+      _closeDropdown($dk);
+      _updateFields($option, $dk);
+      _setCurrent($option.parent(), $dk);
+    
+      e.preventDefault();
+      return false;
+    });
+
+    // Setup keyboard nav
+    $(document).bind('keydown.dk_nav', function (e) {
+      var
+        // Look for an open dropdown...
+        $open    = $('.dk_container.dk_open'),
+
+        // Look for a focused dropdown
+        $focused = $('.dk_container.dk_focus'),
+
+        // Will be either $open, $focused, or null
+        $dk = null
+      ;
+
+      // If we have an open dropdown, key events should get sent to that one
+      if ($open.length) {
+        $dk = $open;
+      } else if ($focused.length && !$open.length) {
+        // But if we have no open dropdowns, use the focused dropdown instead
+        $dk = $focused;
+      }
+
+      if ($dk) {
+        _handleKeyBoardNav(e, $dk);
+      }
+    });
+  });
+})(jQuery, window, document);

js/jquery.json-2.3.min.js

@@ -0,0 +1,23 @@
+
+(function($){var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.toJSON=typeof JSON==='object'&&JSON.stringify?JSON.stringify:function(o){if(o===null){return'null';}
+var type=typeof o;if(type==='undefined'){return undefined;}
+if(type==='number'||type==='boolean'){return''+o;}
+if(type==='string'){return $.quoteString(o);}
+if(type==='object'){if(typeof o.toJSON==='function'){return $.toJSON(o.toJSON());}
+if(o.constructor===Date){var month=o.getUTCMonth()+1,day=o.getUTCDate(),year=o.getUTCFullYear(),hours=o.getUTCHours(),minutes=o.getUTCMinutes(),seconds=o.getUTCSeconds(),milli=o.getUTCMilliseconds();if(month<10){month='0'+month;}
+if(day<10){day='0'+day;}
+if(hours<10){hours='0'+hours;}
+if(minutes<10){minutes='0'+minutes;}
+if(seconds<10){seconds='0'+seconds;}
+if(milli<100){milli='0'+milli;}
+if(milli<10){milli='0'+milli;}
+return'"'+year+'-'+month+'-'+day+'T'+
+hours+':'+minutes+':'+seconds+'.'+milli+'Z"';}
+if(o.constructor===Array){var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i])||'null');}
+return'['+ret.join(',')+']';}
+var name,val,pairs=[];for(var k in o){type=typeof k;if(type==='number'){name='"'+k+'"';}else if(type==='string'){name=$.quoteString(k);}else{continue;}
+type=typeof o[k];if(type==='function'||type==='undefined'){continue;}
+val=$.toJSON(o[k]);pairs.push(name+':'+val);}
+return'{'+pairs.join(',')+'}';}};$.evalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){return eval('('+src+')');};$.secureEvalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){var filtered=src.replace(/\\["\\\/bfnrtu]/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered)){return eval('('+src+')');}else{throw new SyntaxError('Error parsing JSON, source is not valid.');}};$.quoteString=function(string){if(string.match(escapeable)){return'"'+string.replace(escapeable,function(a){var c=meta[a];if(typeof c==='string'){return c;}
+c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
+return'"'+string+'"';};})(jQuery);

js/slick.enhancementpager.js

@@ -0,0 +1,264 @@
+/**
+* SlickGrid Enhancement Pager
+*
+* An easy-to-use slickgrid pager.
+* https://github.com/kingleema/SlickGridEnhancementPager
+* Released under the MIT license.
+* 
+* Copyright 2012 KingleeMa <https://github.com/kingleema>
+*
+*/
+(function ($) {
+    function EnhancementPager(paramObj) {
+        var waiting = parseInt(paramObj.waiting);
+        if (isNaN(waiting)) {
+            waiting = 30000;
+        }
+        
+        var param = { pageSize: 10, pageIndex: 1 };
+        
+        for (var attrname in paramObj.params) {
+            param[attrname] = paramObj.params[attrname];
+        }
+        
+        $.ajax({
+            url: paramObj.remoteUrl,
+            type: 'POST',
+            cache: false,
+            data: param ,
+            dataType: "text",
+            crossDomain: false,
+            timeout: waiting,
+            beforeSend: function() {
+                paramObj.container.html('<span class="dataloading">&nbsp;</span>');
+            },
+            error: function (XMLHttpRequest, textStatus, errorThrown) {
+                paramObj.container.html('<span style="position:absolute;top:5px;left:5px;color:red;">Error!&nbsp;' + errorThrown + '</span>');
+            },
+            success: function (data) {
+                var total = $.evalJSON(data).Total;
+                pagecount = parseInt(Math.floor(parseFloat(total / 10)) + 1);
+                initPager(pagecount, paramObj.pagerType, paramObj.trans, waiting);
+                
+                getData(1, paramObj.remoteUrl, paramObj.pagerType, paramObj.params, waiting);
+            }
+        });
+        
+        function initPager(pagecount, pagertype, trans, waiting) {
+          paramObj.container.html('');
+          $('<span class="perpage" title="Records count of per page"><select class="recordsperpage">\
+              <option value="10">10</option>\
+              <option value="25">25</option>\
+              <option value="50">50</option>\
+              <option value="100">100</option>\
+          </select></span>\
+          <span class="spacer">&nbsp;</span>\
+          <span class="pagelabel" style="vertical-align: middle;">Page</span>\
+          <input class="currentpage" title="Current Page" type="text" value="1" style="vertical-align: middle;width:7px" />\
+          <span style="vertical-align: middle;">&nbsp;/&nbsp;</span>\
+          <span id="totalpages" style="vertical-align: middle;">#</span>\
+          <span class="spacer">&nbsp;</span>\
+          <a id="dataloading" href="javascript:;" class="button-base-class refresh" title="Refresh"></a>\
+          <span class="spacer">&nbsp;</span>\
+          <span class="recordstate"><span class="recordstatelabel">Display</span>&nbsp;<span id="recordsegment"></span>&nbsp;/&nbsp;<span id="totalrecords"></span></span>\
+          <a href="javascript:;" class="button-base-class currentrecords" title="Show/Hide Current Records State"></a>').appendTo(paramObj.container);
+            $('.currentpage').keydown(function (e) {
+                if (e.keyCode == 13) {
+                    var changedvalue = 1;
+                    if (isNaN(parseInt($(".currentpage").val()))) {
+                        $(".currentpage").val(changedvalue);
+                    } else {
+                        changedvalue = parseInt($(".currentpage").val());
+                        if (changedvalue < 1) {
+                            changedvalue = 1;
+                        }
+                        if (changedvalue > parseInt($("#totalpages").text())) {
+                            changedvalue = parseInt($("#totalpages").text());
+                        }
+                        $('.currentpage').val(changedvalue);
+                    }
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                }
+            });
+            if (pagertype == "slider") {
+                $('<span class="button-base-class pageminus" title="Previous Page">&nbsp;</span>\
+               <span class="pagerslider"></span>\
+               <span class="button-base-class pageplus" title="Next Page">&nbsp;</span>\
+               <span class="spacer">&nbsp;</span>').insertBefore($('.pagelabel'));
+                if (trans !== null && trans !== undefined) {
+                    $.each(trans, function (k, v) {
+                        if (k != "resultset_first" && k != "resultset_prev" && k != "resultset_next" && k != "resultset_last") {
+                            if (k == "pagelabel" || k == "recordstatelabel") {
+                                $('.' + k).text(v);
+                            } else {
+                                $('.' + k).attr("title", v);
+                            }
+                        }
+                    });
+                }
+                $(".pagerslider").slider({
+                    range: "min",
+                    value: 1,
+                    step: 1,
+                    min: 1,
+                    max: pagecount,
+                    slide: function (event, ui) {
+                        $(".currentpage").css("width", ui.value.toString().length * 7 + "px");
+                        var pd = ui.value;
+                        $(".currentpage").val(pd);
+                    },
+                    stop: function (event, ui) {
+                        var changedvalue = ui.value;
+                        getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                    }
+                });
+                $(".pageplus").click(function () {
+                    if (isNaN(parseInt($(".currentpage").val()))) {
+                        $(".currentpage").val(1);
+                    }
+                    var changedvalue = parseInt($(".currentpage").val()) + 1;
+                    if (changedvalue > parseInt($("#totalpages").text())) {
+                        changedvalue = parseInt($("#totalpages").text());
+                    }
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+                $(".pageminus").click(function () {
+                    if (isNaN(parseInt($(".currentpage").val()))) {
+                        $(".currentpage").val(1);
+                    }
+                    var changedvalue = parseInt($(".currentpage").val()) - 1;
+                    if (changedvalue < 1) {
+                        changedvalue = 1;
+                    }
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+            } else {
+                $('<a href="javascript:;" class="button-base-class resultset_first" title="First Page"></a>\
+               <a href="javascript:;" class="button-base-class resultset_prev" title="Previous Page"></a>\
+               <span class="spacer">&nbsp;</span>').insertBefore($('.pagelabel'));
+                $('<span class="spacer">&nbsp;</span>\
+               <a href="javascript:;" class="button-base-class resultset_next" title="Next Page"></a>\
+               <a href="javascript:;" class="button-base-class resultset_last" title="Last Page"></a>').insertAfter($('#totalpages'));
+                if (trans !== null && trans !== undefined) {
+                    $.each(trans, function (k, v) {
+                        if (k != "pageminus" && k != "pageplus") {
+                            if (k == "pagelabel" || k == "recordstatelabel") {
+                                $('.' + k).text(v);
+                            } else {
+                                $('.' + k).attr("title", v);
+                            }
+                        }
+                    });
+                }
+                $(".resultset_first").click(function () {
+                    var changedvalue = 1;
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+                $(".resultset_prev").click(function () {
+                    if (isNaN(parseInt($(".currentpage").val()))) {
+                        $(".currentpage").val(1);
+                    }
+                    var changedvalue = parseInt($(".currentpage").val()) - 1;
+                    if (changedvalue < 1) {
+                        changedvalue = 1;
+                    }
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+                $(".resultset_next").click(function () {
+                    if (isNaN(parseInt($(".currentpage").val()))) {
+                        $(".currentpage").val(1);
+                    }
+                    var changedvalue = parseInt($(".currentpage").val()) + 1;
+                    if (changedvalue > parseInt($("#totalpages").text())) {
+                        changedvalue = parseInt($("#totalpages").text());
+                    }
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+                $(".resultset_last").click(function () {
+                    var changedvalue = parseInt($("#totalpages").text());
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                });
+            }
+            $('.recordsperpage').dropkick({
+                change: function (value, label) {
+                    var changedvalue = 1;
+                    getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+                }
+            });
+            $(".refresh").click(function () {
+                if (isNaN(parseInt($(".currentpage").val()))) {
+                    $(".currentpage").val(1);
+                }
+                var changedvalue = parseInt($(".currentpage").val());
+                if (changedvalue < 1) {
+                    changedvalue = 1;
+                }
+                if (changedvalue > parseInt($("#totalpages").text())) {
+                    changedvalue = parseInt($("#totalpages").text());
+                }
+                getData(changedvalue, paramObj.remoteUrl, pagertype, paramObj.params, waiting);
+            });
+            $(".currentrecords").click(function () {
+                $(".recordstate").toggle("fast");
+            });
+        }
+        function getData(changedvalue, url, pagertype, params, waiting) {
+            var pagesize = $('.recordsperpage').val();
+            var pageindex = changedvalue;
+            var postedData = {};
+            postedData['pageSize'] = pagesize;
+            postedData['pageIndex'] = pageindex;
+            if (params !== null && params != undefined) {
+                $.each(params, function (k, v) {
+                    postedData[k] = v;
+                });
+            }
+            //alert();
+            $.ajax({
+                url: url,
+                type: 'POST',
+                cache: false,
+                dataType: "text",
+                crossDomain: true,
+                data: postedData,
+                timeout: waiting,
+                beforeSend: function() {
+                    $("#dataloading").attr("disabled","disabled");
+                    $('#dataloading').removeClass('refresh');
+                    $('#dataloading').addClass('dataloading');
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    paramObj.container.html('<span style="position:absolute;top:5px;left:5px;color:red;">Error!&nbsp;' + errorThrown + '</span>');
+                },
+                success: function (data) {
+                    var total = $.evalJSON(data).Total;
+                    var rows = $.evalJSON($.evalJSON(data).Rows);
+                    //alert(rows.user_id);
+                    paramObj.datagrid.setData(rows);
+                    paramObj.datagrid.render();
+                    $(".currentpage").css("width", changedvalue.toString().length * 7 + "px");
+                    $(".currentpage").val(changedvalue);
+                    var currentvalue = changedvalue;
+                    var pagesize = parseInt($('.recordsperpage').val());
+                    var fromvalue = (currentvalue - 1) * pagesize + 1;
+                    var tovalue = fromvalue + pagesize - 1;
+                    if (tovalue > total) {
+                        tovalue = total;
+                    }
+                    $("#recordsegment").text(fromvalue + "-" + tovalue);
+                    $("#totalrecords").text(total);
+                    var totalpages = parseInt(Math.floor(parseFloat(total / pagesize)) + 1);
+                    $("#totalpages").text(totalpages);
+                    if (pagertype == "slider") {
+                        $(".pagerslider").slider("value", changedvalue);
+                        $(".pagerslider").slider("option", "max", totalpages);
+                    }
+                    $("#dataloading").removeAttr("disabled");
+                    $('#dataloading').removeClass('dataloading');
+                    $('#dataloading').addClass('refresh');
+                }
+            });
+        }
+    }
+    $.extend(true, window, { Slick: { Controls: { EnhancementPager: EnhancementPager}} });
+})(jQuery);