Question

早上好，

今天我正在尝试在我的网站上进行实时搜索PHP + MySQL + Json程序，有时这很困难，因为我不太了解很多Json代码。

网址：http://bdebeauty.es/index.php?option=com_jumi&view=application&fileid=14&Itemid=258

我正在使用以下代码显示包含信息的表：

<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
        $('#employees').dataTable({
            "paging":   true,
            "ordering": false,
            "info":     false
        });
      }
    });
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
  });

  updateEmployees();
</script>

问题在于我需要限制结果并进行“分页”，因为此时它显示了很多条目并且滚动很重。

我该怎么做？

谢谢，非常感谢。

问候。

Answer 1

这不是关于json的问题，你只需要一个工具来显示你的表。我使用this awsome plugin作为jquery。它支持分页，排序，过滤，num。每页的条目数。它的使用和配置非常简单：

将这些内容添加到您的页面中：
使用完整的结果集创建你正在做的表，记住thead和tfoot

使用以下命令激活此表上的插件：

$(document).ready(function() {
    $('#example').dataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

更新：在调用makeTable（）之后，你必须通过将它放在一个元素中来显示这个表，就像现在你可以激活插件一样。

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
        $('#employees').dataTable({
            "paging":   true,
            "ordering": true,
            "info":     true
        });
      }
    });
  }

！重要请记得使用thead和tbody标签like here

如何创建json显示数据的分页？

1 个答案: