JQuery table pagination (MySQL + PHP)


JQuery table pagination (MySQL + PHP)

我正在尝试使用PHP + MySQL + JQuery在我的JQuery表中创建分页,但我不知道如何实现它。

这就是为什么我需要你的帮助,我需要一个简单的分页(我不介意如果它真的真的很简单),我只需要它的工作,因为它是在我的第一个JQuery表的最后一步。

我要张贴我的网站的URL与表工作(没有分页的时刻,我有超过500个条目,但我只显示20在开始)。

URL:点击这里

脚本JQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
  function makeTable(data) {
      var tbl_body = "";
      $.each(data, function () {
          var tbl_row = "";
          $.each(this, function (k, v) {
              tbl_row += "<td>" + v + "</td>";
          })
          tbl_body += "<tr>" + tbl_row + "</tr>";
      })
      return tbl_body;
  }
  function getEmployeeFilterOptions() {
      var opts = [];
      $checkboxes.each(function () {
          if (this.checked) {
              opts.push(this.name);
          }
      });
      return opts;
  }
  function updateEmployees(opts) {
      $.ajax({
          type: "POST",
          url: "submit.php",
          dataType: 'json',
          cache: false,
          data: {
              filterOpts: opts
          },
          success: function (records) {
              $('#employees tbody').html(makeTable(records));
              // here, after the content is inside DOM/visible we activate the plugin
          }
      });
  }
  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function () {
      var opts = getEmployeeFilterOptions();
      updateEmployees(opts);
  });
  $(document).ajaxStart(function () {
      $('#loading').fadeIn("slow");
  }).ajaxStop(function () {
      $('#loading').fadeOut("slow");
  });
  $(window).load(function () {
      updateEmployees();
  });
</script> `

这里还有PHP的SQL部分:

$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);

你需要在表格的底部添加分页按钮,当它们被点击时,你调用你的php发送器脚本的页码是你的按钮作为参数。然后,从PHP脚本中,您需要在mySQL查询的末尾添加一个LIMIT语句。添加

LIMIT A,B

A是你的页码*每页文章的数量。B是你的页码*每页文章数+每页文章数

当您收到数据时,在添加新行之前清除您的表。

$("#employees tbody").remove();