I have a script that fetches data from my database and generates pagination. Everything is working fine, but now I want to include a conditional statement to differentiate the user level as New, Current, or Renewing client.
I've already set up some styles in my CSS using level_styles, so I can add a div style based on the user level. However, I'm not sure where and how to implement this conditional statement.
If anyone can provide assistance, it would be greatly appreciated. The plugin I used for pagination can be found here.
Thank you!
var columns = ["username", "user_id", "address", "state", "postal_code", "phone", "email"];
var level_classes = {
"NEW": "new_client",
"RENEWAL": "renewing_client",
"CURRENT": "current_client"
};
$(document).ready(function() {
var obj = '';
$.getJSON("obtainUsers.php", function(data) {
var num = 1;
var json = JSON.stringify(data);
obj = jQuery.parseJSON(json);
var html = "";
var tot_obj = obj.length;
var highest = (num * 8) - 1;
var lowest = (num * 8) - 8;
var maximum = (highest < total_users) ? highest : total_users;
for (var i = lowest; i <= maximum; i++) {
var toggle = i % 2;
var textTab = " ";
for (var x = 0; x < columns.length; x++) {
if (typeof obj[i][columns[x]] === 'undefined' || obj[i][columns[x]] === "") {
continue;
}
var tmp = "";
if (obj[i][columns[x]] instanceof Object) {
tmp += obj[i][columns[x]];
}
if (tmp && tmp !== ' ') {
textTab += tmp;
}
textTab += "<br />";
}
if (toggle == 0) {
html += "<div style='text-align: center;'>";
html += textTab;
html += "</div>";
} else {
html += "<div style='text-align: center;'>";
html += textTab;
html += "</div>";
}
}
$('.testid').html(html);
});
$('.pagination, .pagination_bottom').bootpag({
total: 20,
page: 1,
leaps: false,
next: 'next',
prev: 'prev',
maximumVisible: 3
}).on('page', function(event, num) {
var html = "";
var total_users = obj.length;
var highest = (num * 9) - 1;
var lowest = (num * 9) - 9;
var maximum = (highest < total_users) ? highest : total_users;
for (var i = lowest; i < maximum; i++) {
var toggle = i % 2;
var textTab = " ";
for (var x = 0; x < columns.length; x++) {
if (typeof obj[i][columns[x]] === 'undefined' || obj[i][columns[x]] === "") {
continue;
}
var tmp = "";
if (obj[i][columns[x]] instanceof Object) {
tmp += obj[i][columns[x]];
}
if (tmp && tmp !== ' ') {
textTab += tmp;
}
textTab += "<br />";
}
if (toggle == 0) {
html += "<div style='text-align: center;'>";
html += textTab;
html += "</div>";
} else {
html += "<div style='text-align: center;'>";
html += textTab;
html += "</div>";
}
}
$('.runningList').html(html);
var total_pages = Math.ceil(obj.length / 10);
$('.pagination_bottom').bootpag({
page: num,
total: total_pages
});
});
});