带有对话框按钮的 jquery 数据表

【问题标题】：jquery Datatables with dialog button带有对话框按钮的 jquery 数据表
【发布时间】：2015-01-27 01:09:41
【问题描述】：

我正在尝试使用一个按钮，该按钮将根据按钮所在的特定行打开一个对话框。我在下面附上了我的代码。

按钮的类是dlg-outletpart-btn:

这里是 jquery javascript 部分：

<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 500
  },
  hide: {
    effect: "fade",
    duration: 700
  },

});

$( ".dlg-outletpart-btn" ).click(function() {
  var outletID = $(this).attr("data-dlg-outletparts");
  $( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>

这是带有 php 的 html：

<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php

session_start();

require_once('./includes/php/include_master.php');

if ($_SESSION['authenticated'] == "true") {

$id_account = $_SESSION['ID_Account'];

$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);

$r = $q->execute();

if(FileMaker::isError($r)){

    if($r->code == 401){
        echo "No outlets found.";
    }else{
        echo "Unknown Error:".$r->code;
    }

}else{


}

} else {
echo "You are not logged in.";
}

?>
<?php

foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');

        echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
        echo '<p>';
        echo '1. &nbsp;'.$outletPart1.'<br>';
        echo '2. &nbsp;'.$outletPart2.'<br>';
        echo '3. &nbsp;'.$outletPart3.'<br>';
        echo '4. &nbsp;'.$outletPart4.'<br>';
        echo '5. &nbsp;'.$outletPart5.'<br>';
        echo '6. &nbsp;'.$outletPart6.'<br>';
        echo '7. &nbsp;'.$outletPart7.'<br>';
        echo '8. &nbsp;'.$outletPart8.'<br>';
        echo '9. &nbsp;'.$outletPart9.'<br>';
        echo '10. &nbsp;'.$outletPart10.'<br>';
        echo '</p>';
        echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
    <tr>
        <th>Floor</th>
        <th>Area Served</th>
        <th>Room Number</th>
        <th>Outlet Number</th>
        <th>Outlet Gas</th>
        <th>Outlet Manufacturer</th>
        <th>Outlet Model</th>
        <th>Outlet Parts</th>
    </tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');

        echo "<tr>";
        echo '<td>' .$outletFloor. '</td>';
        echo '<td>' .$outletAreaServed. '</td>';
        echo '<td>' .$outletRoomNumber. '</td>';
        echo '<td>' .$outletNumber. '</td>';
        echo '<td>' .$outletGas. '</td>';
        echo '<td>' .$outletManufacturer. '</td>';
        echo '<td>' .$outletModel. '</td>';
        echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
    }
?>
</tbody>
</table> 

</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>

【问题讨论】：

    标签： php jquery datatables jquery-datatables filemaker


    【解决方案1】：

    我没有尝试对此进行测试，并且需要很多进行清理，因此请谨慎对待，而不是确切的解决方案。

    在我开始解释之前，有几点需要说明：

    • 掌握缩进级别
      • 缩进不佳的代码更难构建，更难排除故障。在您在 StackOverflow 或任何其他网站上发布之前，您应该首先清理您的代码（实际上，您应该在编写代码时这样做）。这可能是您投反对票的原因，也是您没有对我的问题投赞成票的原因。但是，如果您返回并编辑您的答案以正确缩进所有内容，我会给您的问题一个赞成票。
      • 请记住：您在网上发布的内容反映了您作为程序员的身份。
    • 不要使用单个字母的变量。
      • 为您的变量提供适当的描述性名称。单字母名称也使编码和故障排除变得困难。
    • 如果不需要，就不要写
      • 如果您要在 StackOverflow 上发帖寻求帮助，则尤其如此。应该从您的问题中删除没有任何代码的 else 子句的地方，并且真的应该从您的代码中删除。如果您在子句中没有任何任务要执行，则不要添加它。当你真正需要它时再添加它。这适用于 php 元素的关闭和立即打开。如果您要立即打开另一个 php 元素，则没有理由关闭一个 php 元素。如果这是因为您将问题的两个不同部分编织在一起，请在提交之前将其清理干净。

    我不想以责骂的形式出现，但老实说，如果您向 StackOverflow 发布格式错误且编写不当的代码，那么没有人会回答它，并且您将获得否决票。在格式化代码的过程中，你几乎让我迷失了一部分，但我还是决定完成它。

    所以，这是您可以尝试的代码。专注于我在 javascript 中评论的部分。基本思路是：

    • 让表格成为您的主要选择器。
      • 您可以将tr 元素设为主要选择器，它仍然会为您提供表中tr 的索引，但是将选择器添加到表本身意味着如果您在DOM 之后以编程方式添加新行被渲染的 jquery 方法也适用于他们。
    • 使用this 关键字作为起点。
      • 这将是单击的按钮，可让您四处导航。

    • 利用 jquery 的导航方法，在本例中为 closest()。

      <html>
<head>
    <script> /*datatables script function below */
        $(document).ready( function () {
            $('#table_id_outlets').DataTable();
        });
    </script>

    <script> /*jquery dialog controls for project detail */
        $(function() {
            $( ".dlgoutletpart" ).dialog({
              autoOpen: false,
              show: {
                effect: "blind",
                duration: 500
              },
              hide: {
                effect: "fade",
                duration: 700
              },

            });

            // I changed the element selector to the id of the table element. 
            // This allows you to specify the selector for the 'on' method to apply to all
            // tr elements within the given table and then reference their index relative
            // to the overall table.
            // I'm using `button` for the method's selector because you have only have 
            // on button in your table so it de-couples your selector from your class name.
            $( "#table_id_outlets" ).on('click', 'button', function() {
                debugger;
                // this: refers to the button that was clicked
                // closest: walks up the node hierarchy till it finds a `tr`
                // index(): gives you the index of the `tr` within the table.
                // Use the index number however you need.
                console.log($(this).closest('tr').index());

                var outletID = $(this).attr("data-dlg-outletparts");
                $( "#dialog-" + outletID ).dialog( "open" )
            });
        });
    </script>
</head>

    <body>
    <div>
    <p>
    <a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
    </p>
    </div>
    <div>
    <?php

    session_start();

    require_once('./includes/php/include_master.php');

    if ($_SESSION['authenticated'] == "true") {

        $id_account = $_SESSION['ID_Account'];

        // Note: you can't put a space between your 
        $query = $protoFM['EMGSV']->newFindCommand('web_outlets');
        $query->addFindCriterion('id_account', '==' . $id_account);

        $result = $query->execute();

        if(FileMaker::isError($result)){
            if($result->code == 401){
                echo "No outlets found.";
            }else{
                echo "Unknown Error:".$result->code;
            }
        }

    } else {
    echo "You are not logged in.";
    }

    foreach ($result->getRecords() as $parts){
        $outletID     = $parts->getField('ID_Outlet');
        $outletData1  = $parts->getField('Image_Data');
        $outletData2  = $parts->getField('Image_Data2');
        $outletData3  = $parts->getField('Image_Data3');
        $outletPart1  = $parts->getField('part1');
        $outletPart2  = $parts->getField('part2');
        $outletPart3  = $parts->getField('part3');
        $outletPart4  = $parts->getField('part4');
        $outletPart5  = $parts->getField('part5');
        $outletPart6  = $parts->getField('part6');
        $outletPart7  = $parts->getField('part7');
        $outletPart8  = $parts->getField('part8');
        $outletPart9  = $parts->getField('part9');
        $outletPart10 = $parts->getField('part10');

        echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
        echo '<p>';
        // Use an unordered list here
        echo '1. &nbsp;'.$outletPart1.'<br>';
        echo '2. &nbsp;'.$outletPart2.'<br>';
        echo '3. &nbsp;'.$outletPart3.'<br>';
        echo '4. &nbsp;'.$outletPart4.'<br>';
        echo '5. &nbsp;'.$outletPart5.'<br>';
        echo '6. &nbsp;'.$outletPart6.'<br>';
        echo '7. &nbsp;'.$outletPart7.'<br>';
        echo '8. &nbsp;'.$outletPart8.'<br>';
        echo '9. &nbsp;'.$outletPart9.'<br>';
        echo '10. &nbsp;'.$outletPart10.'<br>';
        echo '</p>';
        echo '</div>';
    }
    ?>
    <table id="table_id_outlets" class="display">
        <thead>
            <tr>
                <th>Floor</th>
                <th>Area Served</th>
                <th>Room Number</th>
                <th>Outlet Number</th>
                <th>Outlet Gas</th>
                <th>Outlet Manufacturer</th>
                <th>Outlet Model</th>
                <th>Outlet Parts</th>
            </tr>
        </thead>
        <tbody>
        <?php
        foreach ($result->getRecords() as $outlet){
            $outletFloor        = $outlet->getField('Outet_Floor');
            $outletAreaServed   = $outlet->getField('Outlet_Area_Served');
            $outletRoomNumber   = $outlet->getField('Outet_Room_Number');
            $outletNumber       = $outlet->getField('Outlet_Number_In_Room');
            $outletGas          = $outlet->getField('Outlet_Gas_Type');
            $outletManufacturer = $outlet->getField('Outlet_Manufacturer');
            $outletModel        = $outlet->getField('Outlet_Model');

            echo "<tr>";
            echo '<td>' .$outletFloor. '</td>';
            echo '<td>' .$outletAreaServed. '</td>';
            echo '<td>' .$outletRoomNumber. '</td>';
            echo '<td>' .$outletNumber. '</td>';
            echo '<td>' .$outletGas. '</td>';
            echo '<td>' .$outletManufacturer. '</td>';
            echo '<td>' .$outletModel. '</td>';
            echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
            }
        ?>
        </tbody>
    </table> 

    </div>
    <?php $outlet->getfields('Outlet_Room_Number')?>
    </body>
</html>

    我没有测试 php 部分，但 jquery 确实有效。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2012-03-11
      • 2010-10-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-22
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode