CakePhp使用ajax和jquery加载表内容

时间:2016-11-23 11:57:31

标签: jquery ajax cakephp load html-table

我有一个空表,当我从select元素

中选择一个选项时,我会用新行提供
<table id="table" align="right" class ="table table-striped table-bordered">
    </table>

这是我的ajax功能,看起来没问题但除了标题我没有排。当我打印错误时,我得到“parsererror”

<script>
      document.getElementById("encaissements").style.visibility = "hidden";


        function loadTransactions (trainer) {
        document.getElementById("encaissements").style.visibility = "visible";
        var trainer = trainer;
        var trHTML = '';
        var headHTML = '<tr><th>' +"Numéro de la facture" + '</th><th>' + 
        "Montant " + '</th><th>' + 
        "Date du réglement  " + '</th><th>' + 
        "Réglée par " + '</th></tr>';

        $('#table').empty(); 
        $('#table').append(headHTML);
        $.ajax({
            type: "POST",
            url: "/icicpermis/trainers/getTransactions/"+trainer,
            data:  {'trainer': trainer },
            dataType: 'json',
            success: function(response){
              //console.log(response);
              $.each(response, function(i,value) {
              console.log(value);
              trHTML = '<tr><td>' + value.date + '</td><td>' + value.price + '</td></tr>';
              $('#table').append(trHTML);
              });
              //$('#table').append(trHTML);

             },
            error: function(x, error) {
              console.log(error );
            }
        });
        }
    </script>

2 个答案:

答案 0 :(得分:1)

我通过屈曲数组值解决了这个问题它是一个数组而不是一个简单的json变量

success: function(response){

              $.each(response, function(i,value) {
              trHTML= '<tr>';

              trHTML+= '<td>' + indice + '</td>';
              $.each(value, function(j,value2) {
                trHTML+= '<td>' + value2 + '</td>';

              });
               trHTML+= '</tr>';
              $('#table').append(trHTML);
              indice++;
              });

             },

答案 1 :(得分:0)

为什么不对表单字段的选择更改事件执行表单提交?您也可以使用ajax,具体取决于您的实际情况。

另外,我还会在这里添加一个建议,即使用jQuery进行DOM选择或操作。它将简化您的工作流程,并最大限度地减少代码行。