时间戳

首页 > 解决方案 > 我正在使用div排序，但是当我使用排序时，数据表功能不起作用

jquery - 我正在使用div排序，但是当我使用排序时，数据表功能不起作用

问题描述

我正在使用 div 排序功能，但是当我激活此功能然后引导时，数据表无法正常工作。这是我的 HTML 代码：

<div id="bingo_width" class="bingo_width" >
<?php if(ifdbPermissions(1))://if (hasPermissions('status_pending',  false)): 
foreach($permissions as $row){
if($row->db_role == 1){
    $iddd = $row->order;
break;
}
}
?> 
<div id="ID_grid_101_<?php echo $iddd?>_user" class="bingo_button_4">
<idn><?php echo $iddd?></idn>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Pending Production</h3>
        </div>
        <?php if (!empty($productions)): ?>
            <div class="box-body">
                <table id="pending_status" class="details table table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Id</th>
                            <th>Priority</th>
                            <th style="width: 100px !important;">Date</th>
                            <th style="width: 100px !important;">Customer</th>
                            <th style="width: 100px !important;">Type of Desk</th>
                            <th style="width: 100px !important;">Salesman</th>
                            <th style="width: 100px !important;">Qty</th>
                            <th style="width: 100px !important;">Date Expected</th>
                        </tr>
                    </thead>
                    <tbody id="sortable">
                        <?php foreach ($productions as $row): ?>
                            <?php if ($row->status == 'Pending'): ?>
                                <tr id="row_<?php echo $row->id; ?>">
                                    <td class="details-control"></td>
                                    <td><?php echo $row->id; ?></td>
                                    <td><?php echo $row->sorting_order; ?></td>
                                    <td><?php echo date_format(date_create($row->create_date), "m-d-Y"); ?></td>
                                    <td><?php echo $row->customer_name; ?></td>
                                    <td><?php echo $row->name; ?></td>
                                    <td><?php echo $row->salesman; ?></td>
                                    <td><?php echo $row->qty; ?></td>
                                    <td><?php echo $originalDate = $row->expected_delivery_date; ?></td>
                                </tr>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <!-- /.box-body  -->
        <?php endif; ?>
    </div>


</div>
<br />
<?php endif; ?>
<?php
if(ifdbPermissions(2))://if (hasPermissions('status_in_production', false)): 
foreach($permissions as $row2){
    if($row2->db_role == 2){
        $iddd2 = $row2->order;
    break;
}
}
?>
<div id="ID_grid_101_<?php echo $iddd2?>_user" class="bingo_button_4">
<idn><?php echo $iddd2?></idn>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">In Production</h3>
        </div>
        <?php if (!empty($productions)): ?>
            <div class="box-body">
                <table id="in_production_status" class="details table table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Id</th>
                            <th>Submitted Date</th>
                            <th>Customer</th>
                            <th>Type of Desk</th>
                            <th>Qty</th>
                            <th>Date Expected</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($productions as $row): ?>
                            <?php if ($row->status == 'In Production'): ?>
                                <tr>
                                    <td class="details-control"></td>
                                    <td><?php echo $row->id; ?></td>
                                    <td><?php echo date_format(date_create($row->create_date), "m-d-Y"); ?></td>
                                    <td><?php echo $row->customer_name ?></td>
                                    <td><?php echo $row->name; ?></td>
                                    <td><?php echo $row->qty; ?></td>
                                    <td><?php echo $originalDate = $row->expected_delivery_date; ?></td>
                                </tr>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        <?php endif; ?>
    </div>

 </div>
<br />
<?php endif; ?>


<!----- products------->
<?php if(ifdbPermissions(14)):
            foreach($permissions as $row){
if($row->db_role == 14){
    $iddd = $row->order;
break;
}
}?>
<div id="ID_grid_101_<?php echo $iddd?>_user" class="bingo_button_4">
<idn><?php echo $iddd?></idn>  

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Products Detail</h3>
    </div>
    <?php //if (!empty($purchase_orders)): ?>
        <div class="box-body">
            <div class="table-responsive">  
                <table id="product_detail" class="table table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <!--<th>Sr #</th>-->
                            <th>Part </th>
                            <th>Title</th>
                            <th>Qty on Hand</th>
                            <th>QA</th>
                            <th>Total Cost</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if ($products): ?>  
                            <?php 
                            $total_cost = 0;
                            $count1 = 1; 
                            foreach ($products as $row): 
                            $total_cost += $row->total_cost;
                            ?>
                                <tr>
                                    <!--<td><?php //echo $count1++;?></td>-->
                                    <td><?php echo $row->part; ?></td>
                                    <td><?php echo $row->product_name; ?></td>
                                    <td><?php echo $row->qoh; ?></td>
                                    <td><?php echo $row->qa; ?></td>
                                    <td><?php echo $row->total_cost; ?></td>
                                </tr>
                            <?php 
                             endforeach ?>
                        <?php endif; ?>  
                    </tbody>
                    <tfoot>
                        <tr>
                            <!--<th></th>-->
                            <td>Total</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><?php echo $total_cost?></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <!-- /.box-body -->
    <?php //endif; ?>
</div>

</div>
<?php endif?>
 <!-------products----->


</div>

这是我的脚本：

<script>
$('#pending_status').DataTable({});
$('#in_production_status').DataTable();
$('#product_detail').DataTable();

$(document).ready(function(){
order_bingo_item('ascending');
});
function order_bingo_item(text_order)
{
//console.log('this is functtion');
var order_type = text_order;
var $divs = $("div.bingo_button_4");

if (order_type=='ascending')
{
 //console.log($divs);
 var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).find("idn").text() - $(b).find("idn").text();
});
$("#bingo_width").html(alphabeticallyOrderedDivs);
}
else
if (order_type=='descending')
{
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(b).find("idn").text() - $(a).find("idn").text();
});
$("#bingo_width").html(alphabeticallyOrderedDivs);
 }


}
</script>

任何机构都可以帮助我吗？当我删除用于排序的代码时，它运行良好。当我添加此代码进行排序时，排序效果很好，但数据表分页和其他功能不起作用。请帮帮我。

标签： jqueryhtmlcss

解决方案

推荐阅读