Блог

Доброе утро,

Сегодня я пытаюсь создать программу live search PHP MySQL Json на своем веб-сайте, и иногда это сложно, потому что я не знаю много кода Json.

URL:http://bdebeauty.es/index.php?option=com_jumiamp;view=applicationamp;fileid=14amp;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>
  

Проблема в том, что мне нужно ограничить результаты и наличие «разбивки на страницы», потому что на данный момент в нем отображается много записей, а прокрутка тяжелая.

Как я могу это сделать?

Спасибо, высоко ценится.

С уважением.

Это не проблема с json, вам просто нужен инструмент для отображения вашей таблицы. Я использовал этот потрясающий плагин для jquery. Он поддерживает разбивку на страницы, упорядочивание, фильтрацию, num. количество записей на странице. Это действительно просто в использовании и настройке:

1. добавьте их на свою страницу:

2. создайте свою таблицу, как вы делаете прямо сейчас, с полным набором результатов, помните thead и tfoot

активируйте плагин в этой таблице с помощью:

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

Обновить:
После вызова makeTable() вы должны отобразить эту таблицу, поместив ее в элемент like , только теперь вы можете активировать плагин.

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

!Важно Не забудьте записать полную таблицу с тегами ad и tbody, как здесь