在模态中对动态生成的html表进行排序

时间:2018-01-03 15:29:36

标签: javascript php jquery html

我搜索过SO以寻找与我类似的问题,但我找不到任何可行的方法。我已经尝试了许多不同的方法,运气不错。

我有一个模态弹出窗口,我通过

调用
<span><button id="products_button" class="btn dt_buttons ajax_forms" data-keyid="" data-source="store_products_list_popup.php" data-target="popup" data-element=""><i class="fa fa-list fa-md"></i><span>&nbsp; View Products </span></button>

在该文件中,我有一个带标题行的表

<table id="tbl_store_product_sizes" class="table table-fixed table-striped table-bordered datalist" width="100%" cellspacing="0">
    <thead>

            <tr >
                 <th> No. </th>
                 <th> Product Name  </th>
                 <th> Department Name </th>
                 <th> Unit Cost </th>
                 <th> Quantity Counted </th>
                 <th> Total Cost </th>

             </tr>


    </thead> 

并从MySQL查询结果生成

echo "<tr>";                    
                    echo "<td style='color:red' > $row_counter </td>";
                    echo "<td style='color:red; width:200px;' class='left_align' > $lstr_product_name </td>";
                    echo "<td style='color:red'> $lstr_department_name </td>";
                    echo "<td style='color:red' > <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='$lint_unit_cost' /> <input name='product_id' class='form-control product_id' value='$lint_product_id' type='hidden'/> </td>";
                    echo "<td style='color:red' > <input type='text' tabindex='-1' readonly name='quantity_counted' class='form-control editable_control number_format unit_cost' style='width:50px;' value='$lint_quantity_counted' />  </td>";
                    echo "<td style='color:red' > <input type='text' tabindex='-1' readonly name='total_cost' class='form-control editable_control number_format unit_cost' style='width:50px;' value='$lint_total_cost' />  </td>";


                    echo "</tr>";

我试图通过点击标题行来使该表可排序。我已经尝试过jQuery tablesorter插件,但它似乎没有给我预期的结果。我调用模态的文件叫做home_stocktake_locations.php。在那个文件中我添加了

    $(function(){
  $("#tbl_store_product_sizes").tablesorter();
});

根本不起作用。我也尝试过类名

$(function(){
  $(".table").tablesorter();
});

现在这适用于home_stocktake_locations.php中的所有表格,我可以对它们进行排序,但它不会影响store_products_list_popup.php生成的模式。我也尝试在弹出文件中添加相同的功能,但没有运气。

我做错了什么?甚至可以在模态中对表进行排序,还是需要采用不同的方法?

0 个答案:

没有答案