Ajout pagination logs
This commit is contained in:
Chocobozzz
parent
766e9b20bc
commit
9b346ca69f
70
ajax.php
70
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,37 +43,54 @@
|
||||
}
|
||||
// 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()) {
|
||||
do{
|
||||
// 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";
|
||||
$start_time_array = explode(' ', $data['log_start_time']);
|
||||
$start_time = datefromsql($start_time_array[0]) . ' ' . $start_time_array[1];
|
||||
$end_time_array = explode(' ', $data['log_end_time']);
|
||||
$end_time = datefromsql($end_time_array[0]) . ' ' . $end_time_array[1];
|
||||
$list = array();
|
||||
|
||||
$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'],
|
||||
"log_remote_ip" => $data['log_remote_ip'],
|
||||
"log_remote_port" => $data['log_remote_port'],
|
||||
"log_start_time" => $start_time,
|
||||
"log_end_time" => $end_time,
|
||||
"log_received" => $received,
|
||||
"log_send" => $sent);
|
||||
} while($data = $req->fetch());
|
||||
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";
|
||||
$start_time_array = explode(' ', $data['log_start_time']);
|
||||
$start_time = datefromsql($start_time_array[0]) . ' ' . $start_time_array[1];
|
||||
$end_time_array = explode(' ', $data['log_end_time']);
|
||||
$end_time = datefromsql($end_time_array[0]) . ' ' . $end_time_array[1];
|
||||
|
||||
echo json_encode($list);
|
||||
}
|
||||
else{
|
||||
$list = array();
|
||||
echo json_encode($list);
|
||||
// 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'],
|
||||
"log_remote_ip" => $data['log_remote_ip'],
|
||||
"log_remote_port" => $data['log_remote_port'],
|
||||
"log_start_time" => $start_time,
|
||||
"log_end_time" => $end_time,
|
||||
"log_received" => $received,
|
||||
"log_send" => $sent));
|
||||
}
|
||||
|
||||
// Récupération du nombre lignes de log
|
||||
$req_nb = $bdd->prepare('SELECT COUNT(*) AS nb FROM log');
|
||||
$req_nb->execute();
|
||||
$data_nb = $req_nb->fetch()['nb'];
|
||||
|
||||
// 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"){
|
||||
|
||||
201
css/dropkick.css
Normal file
201
css/dropkick.css
Normal file
@ -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 ******/
|
||||
124
css/enhancementpager.css
Normal file
124
css/enhancementpager.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
16
index.php
16
index.php
@ -29,9 +29,11 @@
|
||||
<head>
|
||||
<meta charset="utf-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/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>
|
||||
@ -74,7 +76,8 @@
|
||||
<div class="grid-header">
|
||||
<label>Logs</label>
|
||||
</div>
|
||||
<div class="grid" id="grid_log"></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
|
||||
|
||||
110
js/index.js
110
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();
|
||||
|
||||
});
|
||||
|
||||
402
js/jquery.dropkick-1.0.0.js
Normal file
402
js/jquery.dropkick-1.0.0.js
Normal file
@ -0,0 +1,402 @@
|
||||
/**
|
||||
* DropKick
|
||||
*
|
||||
* Highly customizable <select> lists
|
||||
* https://github.com/JamieLottering/DropKick
|
||||
*
|
||||
* © 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);
|
||||
23
js/jquery.json-2.3.min.js
vendored
Normal file
23
js/jquery.json-2.3.min.js
vendored
Normal file
@ -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);
|
||||
264
js/slick.enhancementpager.js
vendored
Normal file
264
js/slick.enhancementpager.js
vendored
Normal file
@ -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"> </span>');
|
||||
},
|
||||
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||||
paramObj.container.html('<span style="position:absolute;top:5px;left:5px;color:red;">Error! ' + 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"> </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;"> / </span>\
|
||||
<span id="totalpages" style="vertical-align: middle;">#</span>\
|
||||
<span class="spacer"> </span>\
|
||||
<a id="dataloading" href="javascript:;" class="button-base-class refresh" title="Refresh"></a>\
|
||||
<span class="spacer"> </span>\
|
||||
<span class="recordstate"><span class="recordstatelabel">Display</span> <span id="recordsegment"></span> / <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"> </span>\
|
||||
<span class="pagerslider"></span>\
|
||||
<span class="button-base-class pageplus" title="Next Page"> </span>\
|
||||
<span class="spacer"> </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"> </span>').insertBefore($('.pagelabel'));
|
||||
$('<span class="spacer"> </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! ' + 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);
|
||||
Loading…
Reference in New Issue
Block a user