为分页添加条件

时间:2015-05-12 00:21:07

标签: javascript jquery css plugins pagination

以下脚本从我的数据库中提取数据并创建分页。

分页有效,但我想添加一个区分用户级别的条件语句。用户级别可以是New,Current或Renewing客户端。

我不确定如何或在何处添加条件语句。我在我的CSS中创建了level_styles,因此可以添加div样式,但是如何。

任何帮助将不胜感激。这是我使用的plugin

由于

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++) {
        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
      });
    });
  });

1 个答案:

答案 0 :(得分:0)

这是我最终做的事情

if( columns[x] == "user_level" && obj[i][columns[x]] == new_user )
{
    textTab += "<span class='new_user'>";
}                                
else if ( columns[x] == "user_level" && obj[i][columns[x]] == current_user )
{
    textTab += "<span class='current_user'>";
}
else if ( columns[x] == "user_level" && obj[i][columns[x]] == renew_user )
{
    textTab += "<span class='renewing_user'>";
}

我创建了三个变量new_usercurrent_userrenew_user。我在这里添加了这个条件

if (typeof obj[i][columns[x]] === 'undefined' || obj[i][columns[x]] === "") {
      continue;
    }
//Added the conditions here
var tmp = "";

非常感谢@humble.rumble.6x3