Question

我正在使用tablesaw来构建具有响应式设计的HTML表格。当我直接在我的php（即Codeigniter）网页中使用代码时，它工作得很好。但是如果单击一个按钮（即表单提交）进行ajax调用并且从该调用中获取响应表的完整HTML然后显示在页面中，则它不起作用。它只是一个非负责任的HTML表格。

ajax调用，即表单提交是使用jQuery Form plugin

完成的

HTML：

<div class="result"></div>

    <form class="form_action" enctype="multipart/form-data" name="form_action" 
method="post" action="<?php echo BASE_URL; ?>index/show_order_details_now">

    <input type="submit" value="Submit" class="btn_submit" name="submit_evoucher" />

    </form>

JS：

 $(form).ajaxSubmit({
      target: '.result', 
      success: function(response) {
       $(".result").html(response);

      }
    });

被调用的函数是：

function show_order_details_now(){

    ?>


    <?php

$orders_paid='  <link  rel="stylesheet" type="text/css" href="'.JSPATH.'tablesaw-master/dist/tablesaw.css"/>

        <table   class="tablesaw purchase_details_tbl_1"  data-tablesaw-mode="columntoggle" ><thead>
                <tr>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Invoice No</th>



                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Product Code</th>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Product Name</th>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Specification</th>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Quantity</th>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Rate</th>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Sub Total(Tk)</th>
                </tr>
            </thead><tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>';




            //echo '<br/><b> order iddd = '.$order_id.'</b>';







        $orders_paid.='</tbody></table>';





        echo $orders_paid;



}// end of function show_order_details_now

那么如何在这种情况下使表响应为tablesaw应该做什么？

Answer 1

只需添加：

jQuery(document).trigger('enhance.tablesaw');

将表格插入DOM后。

tablesaw - 用于响应式设计的jQuery插件HTML表在ajax调用的情况下不起作用

1 个答案: