Question

我刚开始在我的系统中使用DataTables插件并设法显示订单列表。我现在面临的问题是用于在SET NEXT STATUS列中弹出表单的fancybox在Datatable中不起作用。任何有关解决此问题的帮助/建议都将受到高度赞赏。：）

这是使用DataTable的页面：

<?php 
require_once ('common/isLogin.php');
//(($nature == 1)||($nature == 2)||($nature == 3)||($nature ==   5)||($nature == 6)||($nature == 9)  ) ? "": die("<div class='error'>No access rights</div>");
(($nature == 1)||($nature == 10)  ) ? "": die("<div class='error'>No access rights</div>");
?>




<?php
require_once ('database.php');
require_once ('common/order_status.php');


$result = mysql_query("SELECT * FROM orders 

WHERE STATUS = '3' OR STATUS = '18' ORDER BY orders.id desc");
?>

  <ul id="crumbs">
  <li><a href="index.php?Request=admin_main">Assembling</a></li>
  </ul>

    <link rel="stylesheet" type="text/css" href="plugin/media/css/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="plugin/media/css/dataTables.jqueryui.css">

    <script type="text/javascript" language="javascript" src="plugin/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="plugin/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="plugin/media/js/dataTables.jqueryui.js"></script>



    <style>
        *{
            font-family: arial;
        }
    </style>
    <script type="text/javascript" >
     $(document).ready(function(){


            $('#datatables').dataTable({
                "sPaginationType":"full_numbers",
                "aaSorting":[[2, "desc"]],
                "bJQueryUI":true,



            });
         });

    </script>



  <br />


 <table id="datatables" class="display">
<thead>
    <tr><td colspan = '14' style='border:0;white;background:#4f6b72;height:40px;color:white;font-weight:bolder;font-size:16px;'>ASSEMBLING</td></tr>
  <tr>
    <th>Order ID</th> 
    <th>Logistic ID</th>
    <th>Order Date</th>
    <th>Products</th>
    <th>Quantity</th>
    <th>Quantity Packed</th>
    <th style="width:10px">Order Remarks</th>
    <th style="width:10px">To Pack Remarks</th>
    <th>Status</th>   
    <th>Action</th> 
    <th>Set Next Status</th>
  </tr>
</thead>
<tbody>
  <?php
                while ($row = mysql_fetch_array($result)) {
                $status = $row['status'];   
                $order_id = $row['id'];
                    ?>
  <tr>
    <td><?=$row['id']?></td>
    <td><?=displayLogisticId($row['id'])?></td>
    <td><?=ConvertDate($row['date'])?></td>
    <td><?=truncateProduct($row['id'])?></td>
    <td><?=truncateQuantity($row['id'])?></td>
    <td><?=quantityPack($row['id'])?></td>
    <td><?=$row['remarks']?></td>
    <td><?=$row['to_pack_remarks']?></td>
    <td><?=displayStatus($row['status'])?></td>

    <td><a href=index.php?Request=packer_view&sec_code=<?=$row['sec_code']?>><img src='images/edit.jpeg' height='20' weight='20' border='0' alt='View' title='View'></a></td>
    <td><?=((($row['current_status']!==12)||($row['current_status']!==17)) && (($nature == 1)||($nature == 10))  ) ? displayStatusLink($status,$order_id,''):"Not Available";?></td>

   </tr>

  <?php
                }
                ?>



</tbody>
</table>

和SET NEXT STATUS弹出窗体（使用fancybox）来自＆＃34; commom / order_status.php＆＃34; ：

 <script type="text/javascript">
    $(document).ready(function() {


        $("a#example3").fancybox({
            'overlayShow'   : true,
            'hideOnOverlayClick' :true,
            'width'         : '45%',
            'height'        : '70%',
            'autoScale'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',                                
            'type'          : 'iframe',
            'onClosed'      : function() {
             parent.location.reload(true); ;
            }

        });

        $("a#example5").fancybox({
            'overlayShow'   : true,
            'hideOnOverlayClick' :true,
            'width'         : '55%',
            'height'        : '80%',
            'autoScale'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'type'          : 'iframe',

        });

        $("a#example4").fancybox({
            'overlayShow'   : true,
            'hideOnOverlayClick' :true,
            'width'         : '32%',
            'height'        : '35%',

            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'type'          : 'iframe',
            'onClosed'      : function() {
            parent.location.reload(true); ;
          }

        });

    });
</script>


function displayStatusLink($id, $order_id, $notice,$nature,$logistic_id){
$notice = '"Are you sure? "';

switch($id){


    case 3: //to pack
        echo "<a href='packaging/partial_pack.php?id=$order_id' id='example3'>Pack</a>&nbsp;|&nbsp;";
    //echo "<a href=index.php?Request=packed_email&id=$order_id&set_status=17 onclick='return confirm($notice)'>Packed</a>&nbsp;|&nbsp;";

        //echo "<a href=index.php?Request=admin_main&id=$order_id&set_status=17 onclick='return confirm($notice)'>Packed</a>&nbsp;|&nbsp;";
        //echo "<a href=index.php?Request=admin_main&id=$order_id&set_status=3 onclick='return confirm($notice)'>Prepare</a>&nbsp;|&nbsp;";
        //echo "<a href='admin/ship.php?id=$order_id' id='example3'>Ship</a>&nbsp;|&nbsp;";
        break;

    case 18: //partially packed 
    echo "<a href='packaging/partial_pack.php?id=$order_id' id='example3'>Pack</a>&nbsp;|&nbsp;";
     //echo "<a href=index.php?Request=packed_email&id=$order_id&set_status=17 onclick='return confirm($notice)'>Packed</a>&nbsp;|&nbsp;";
     echo "<a href='admin/ship.php?id=$order_id' id='example3'>Ship</a>&nbsp;|&nbsp;";
    //echo "<a href=index.php?Request=admin_main&id=$order_id&set_status=4 onclick='return confirm($notice)'>Done</a>";
            break;

    default: 
        return "";

}
}
 ?>

Answer 1

当您应用fancybox插件时，听起来元素不在DOM中。我会在createdRow回调中调用fancybox。此外，您还会遇到有id属性冲突的问题。

createdRow说明

当创建TR元素（以及所有TD）时执行此回调   已插入子元素，或在使用DOM时注册   源，允许操纵TR元素。

这在使用延迟渲染时特别有用   （deferRender）或服务器端处理（serverSide）所以你可以   添加事件，类名信息或以其他方式格式化行   已创建。

$(document).ready( function () {
  var table = $('#example').DataTable({
    createdRow: function(row, data) {
      $('a', row).fancybox(options);
    }    
  });
});

Fancybox无法在Datatable中工作

1 个答案: