我搜索过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> 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生成的模式。我也尝试在弹出文件中添加相同的功能,但没有运气。
我做错了什么?甚至可以在模态中对表进行排序,还是需要采用不同的方法?