Question

我想问一个问题，我需要你们的帮助。我想在我的项目中使用jquery Datatable插件，但出了点问题。表格显示正确，但没有数据表功能正常工作。

这是我的代码：

    function get_answer(get_date, get_id) {
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    var date = get_date;
    var id = get_id;
    var data = {
        'action': 'get_answers_ajax',
        'date': date,
        'id': id
    };

    var table_structure = '<table id="result-' + id + '" class="table table-striped table-hover table-dynamic display"><thead class="result_head"><tr><th></th></tr></thead><tbody class="result_body"><tr><td></td></tr></tbody></table>';
    jQuery('#tabs-' + id).append(table_structure);


    jQuery.post(ajaxurl, data, function (response) {
        if (response) {
            var obj = JSON.parse(response);
            var heads = [];
            var results = [];

            jQuery.each(obj, function (key, res) {
                if (jQuery.inArray(res.label, heads) == '-1')
                {
                    heads.push(res.label); 
                }
                results.push(res.value); 
            });


            var head = jQuery('#tabs-' + id + ' .result_head tr');
            head.empty();
            jQuery.each(heads, function (key, value) {
                head.append('<th>' + value + '</th>');
            });


            var body = jQuery('#tabs-' + id + ' .result_body');
            body.empty();
            if (results.length > 0) {
                body.append('<tr role="row" class="odd">');  // Open tr
                var count_heads = heads.length;
                var count_answ = 0;

                jQuery.each(results, function (key, value) {
                    if (value.substring(0, 4) == 'http') {
                        body.find('tr').last().append('<td><img src="' + value + '" alt="none" width="200px" height="200px" /></td>');
                    } else {
                        body.find('tr').last().append('<td>' + value + '</td>');
                    }

                    count_answ++;
                    if ((count_answ % count_heads) == 0) {
                        body.find('tr').last().find('td').last().after('</tr>');
                        body.find('tr').last().after('<tr role="row" class="even">');
                    }
                });

                body.find('tr').last().after('</tr>'); // Close tr
            }
        }
    });


    jQuery('#result-' + id).dataTable(
            {
                "ordering": true,
                "searching": true
            }
    );

head和reults数组看起来像这样：

Heads =＆gt; [“Eredmény”，“Felhasználó”，“Dátum”]
结果=＆gt; [“666”，“Wathfea”，“2014-10-14 12:55:12”，“hdjjdbkudbh”，“Zsolti”，“2014-10-14 16:44:55”，“kfhkfvjhdgh”，“Zsolti” ，“2014-10-14 17:16:29”]

我的PHP函数是哪一个返回数据：

        function get_answers() {
        global $wpdb;
        $date = $_POST['date'];
        $form_id = $_POST['id'];

        $date_pice = explode(' - ', $date);
        $question = array();
        $answer = array();


        $sql_answers = "SELECT lead.date_created, detail.field_number, detail.value, detail.form_id, meta.display_meta FROM wp_rg_lead_detail AS detail INNER JOIN wp_rg_lead AS lead ON detail.lead_id = lead.id INNER JOIN wp_rg_form_meta AS meta ON detail.form_id = meta.form_id WHERE lead.date_created BETWEEN '{$date_pice[0]}' AND '{$date_pice[1]}' AND detail.form_id = '{$form_id}' ";
        $answers = $wpdb->get_results($sql_answers);
        foreach ($answers as $ans_info) {
            $meta = self::bsp_unserialize($ans_info->display_meta);
            foreach ($meta[fields] as $fields) {
                if ($fields["id"] == $ans_info->field_number) {
                    $question["kerdes"] = $fields["label"];
                    $answer["valasz"] = $ans_info->value;
                }
            }
            $toJSON[] = array("label" => $question["kerdes"], "value" => $answer["valasz"]);
        }
        echo json_encode($toJSON);
        die();
    }

因此，该表显示了其中的所有数据，但是如果我想搜索或订购或分页nothings工作。

关于它的任何提示？

很多

Answer 1

我可以解决问题。我刚刚修改了append方法，现在我用一个准备好的html元素制作了一个html字符串，我刚刚在这个过程的最后发生了。

jQuery(document).ready(function () {
var table_structure = '<table id="result" class="table table-striped table-hover table-dynamic display"><thead class="result_head"><tr><th></th></tr></thead><tbody class="result_body"><tr><td></td></tr></tbody></table>';

jQuery('#table').append(table_structure);

var heads =  ["Result", "User", "Date"];
var results = ["666", "Wathfea", "2014-10-14 12:55:12", "hdjjdbkudbh", "Zsolti", "2014-10-14 16:44:55", "kfhkfvjhdgh", "Zsolti", "2014-10-14 17:16:29"];

            jQuery('.result_head tr').empty();
            jQuery.each(heads, function (key, value) {
                jQuery('.result_head tr').append('<th>' + value + '</th>');
            });


            var body = jQuery('.result_body');
            body.empty();
            if (results.length > 0) {
                var count_heads = heads.length;
                var count_answ = 0;
                var html = "";

                jQuery.each(results, function (key, value) {

                    if ((count_answ % count_heads) === 0) { 
                        html += '<tr>';
                    }

                    if (value.substring(0, 4) == 'http') {
                        html += '<td><img src="' + value + '" alt="none" width="200px" height="200px"/></td>'; 
                    } else {
                        html += '<td>' + value + '</td>';
                    }
                    count_answ++;

                   if ((count_answ % count_heads) === 0) { 
                        html += '</tr>';
                       body.append(html);
                       html = '';
                    }

                });

            }


    jQuery('#result').dataTable(
            {
                "ordering": true,
                "searching": true
            }
    );
});

Jquery数据表函数不起作用

1 个答案: