Javascript jQuery数据表模式-添加信息_Javascript_Jquery_Datatables_Jquery Datatables

Javascript jQuery数据表模式-添加信息

javascript jquery datatables

Javascript jQuery数据表模式-添加信息,javascript,jquery,datatables,jquery-datatables,Javascript,Jquery,Datatables,Jquery Datatables,我试着做以下几点。当您单击任意一行时，打开一个包含行信息的模式和一个包含另一个表信息的组合框，并将其插入数据库中的新表中。我的问题是，你能通过模态来实现吗？怎么做多谢各位。追踪我的消息来源 <script type="text/javascript"> $(document).ready(function() { var oTable = $('#example').dataTable({ "bProcessing": tr

我试着做以下几点。当您单击任意一行时，打开一个包含行信息的模式和一个包含另一个表信息的组合框，并将其插入数据库中的新表中。我的问题是，你能通过模态来实现吗？怎么做

多谢各位。追踪我的消息来源

  <script type="text/javascript">
    $(document).ready(function() {
        var oTable = $('#example').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                "aButtons": [{
                    "sExtends": "copy",
                    "sButtonText": "Copy"
                }, {
                    "sExtends": "print",
                    "sButtonText": "Print"
                }, {
                    "sExtends": "collection",
                    "sButtonText": "Save",
                    "aButtons": ["csv", "pdf"]
                }]
            },
            "autoWidth": true,
            "sAjaxSource": "Load_Arm_tec.php",
            "aoColumns": [{
                "sClass": "readonly",
                "sTitle": "ID",
                "aTargets": [0]
            }, {
                "sClass": "readonly",
                "sTitle": "arm",
                "aTargets": [1]
            }, {
                "sClass": "readonly",
                "sTitle": "City",
                "aTargets": [2]
            }, {
                "sClass": "readonly",
                "sTitle": "reg",
                "aTargets": [3]
            }, {
                "sClass": "readonly",
                "sTitle": "QNTD",
                "aTargets": [4]
            }, {
                "sClass": "readonly",
                "sTitle": "Size",
                "aTargets": [5]
            }, {
                "sClass": "readonly",
                "sTitle": "DT_start",
                "aTargets": [6]
            }, {
                "sClass": "readonly",
                "sTitle": "DT_end",
                "aTargets": [7],
                "type": "date"
            }, {
                "sClass": "readonly",
                "sTitle": "Days",
                "aTargets": [8]
            }],
            "fnDrawCallback": function() {
                $('td.readonly').on('click', function(e) {

                    var id = oTable.fnGetData($(this).parents('tr')[0])[0];

                    //MODAL HERE....  HOW?


                });
            }
        });


    });
    </script>


$（文档）.ready（函数（）{
var oTable=$（“#示例”）.dataTable({
“bProcessing”：正确，
“bServerSide”：正确，
“sPaginationType”：“完整编号”，
“dom”：“Tlfrtip”，
“表格工具”：{
“sSwfPath”：“media/swf/copy_csv_xls_pdf.swf”，
“阿布顿”：[{
“复制”，
“sbuttonext”：“复制”
}, {
“性倾向”：“打印”，
“sbuttonext”：“打印”
}, {
“性倾向”：“收藏”，
“sbuttonext”：“保存”，
“阿布顿”：[“csv”，“pdf”]
}]
},
“自动宽度”：正确，
“sAjaxSource”：“Load_Arm_tec.php”，
“aoColumns”：[{
“sClass”：“只读”，
“针”：“ID”，
“目标”：[0]
}, {
“sClass”：“只读”，
“针”：“手臂”，
“目标”：[1]
}, {
“sClass”：“只读”，
“针”：“城市”，
“目标”：[2]
}, {
“sClass”：“只读”，
“针”：“reg”，
“目标”：[3]
}, {
“sClass”：“只读”，
“针”：“QNTD”，
“目标”：[4]
}, {
“sClass”：“只读”，
“缝线”：“尺寸”，
“目标”：[5]
}, {
“sClass”：“只读”，
“缝合”：“DT_开始”，
“目标”：[6]
}, {
“sClass”：“只读”，
“针”：“DT_端”，
“目标”：[7]，
“类型”：“日期”
}, {
“sClass”：“只读”，
“针”：“天”，
“目标”：[8]
}],
“fnDrawCallback”：函数（）{
$（'td.readonly'）。在（'click'，函数（e）{
var id=oTable.fnGetData（$（this.parents（'tr'）[0]）[0]；
//这里…怎么了？
});
}
});
});

还有我的HTML源代码

<div id="dynamic">

    <table cellpadding="0" cellspacing="0" border="0" class="display"
        id="example">
        <thead>
            <tr>
                <th>ID</th>
                <th>ARM</th>
                <th>CITY</th>
                <th>REG</th>
                <th>QNTD</th>
                <th>SIZE</th>
                <th>DT_START</th>
                <th>DT_END</th>
                <th>DAYS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5" class="dataTables_empty">Loading..</td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>ID</th>
            <th>ARM</th>
            <th>CITY</th>
            <th>REG</th>
            <th>QNTD</th>
            <th>SIZE</th>
            <th>DT_START</th>
            <th>DT_END</th>
            <th>DAYS</th>
        </tr>
        </tfoot>
    </table>
</div>


身份证件
臂
城市
规则
QNTD
大小
DT_开始
德图端
天
加载。。
身份证件
臂
城市
规则
QNTD
大小
DT_开始
德图端
天

更新：fnDrawCallback带有模态…

好的，现在的问题是：如何添加包含数据库信息的组合框？？

"fnDrawCallback" : function() {
    $('td.readonly').on('click', function (e) {

        var id_armario = oTable.fnGetData($(this).parents('tr')[0])[0];
        var armario = oTable.fnGetData($(this).parents('tr')[0])[1];
        var cidade = oTable.fnGetData($(this).parents('tr')[0])[2];

      dialog = $( "#users-contain" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          open: function( event, ui ) {
              $( "#users tbody" ).append( "<tr>" +
                  "<td>" + id + "</td>" +
                  "<td>" + arm + "</td>" +
                  "<td>" + city + "</td>" +
                     "</tr>" );
          },
          close: function( event, ui ) {
              $("#users tbody").empty();
           },
          buttons: {
            "OK": function(){
                dialog.dialog( "close" );
            },
            Cancel: function() {
              dialog.dialog( "close" );
            }
         }
    });

“fnDrawCallback”：函数（）{
$（'td.readonly'）。在（'click'，函数（e）{
var id_armario=oTable.fnGetData（$（this.parents（'tr'）[0]）[0]；
var armario=oTable.fnGetData（$（this.parents（'tr'）[0]）[1]；
var cidade=oTable.fnGetData（$（this.parents（'tr'）[0]）[2]；
dialog=$（“#用户包含”）。dialog({
自动打开：错误，
身高：300，
宽度：350，
莫代尔：是的，
打开：功能（事件、用户界面）{
$（“#users tbody”）.append（”+
“”+id+“”+
“”+手臂+“”+
“”+城市+“”+
"" );
},
关闭：功能（事件、用户界面）{
$（“#users tbody”）.empty（）；
},
按钮：{
“OK”：函数（）{
dialog.dialog（“关闭”）；
},
取消：函数（）{
dialog.dialog（“关闭”）；
}
}
});

还有模态的HTML

<div id="users-contain">
    <h1>Existing Users:</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>Id</th>
                <th>Arm</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>


现有用户：
身份证件
臂
城市

可以通过将模型克隆到循环遍历数据的each语句中并将其附加到某个部分来实现。我还建议添加类，以便使用jQuery find（）函数更容易找到它

$.each（数据数组、函数（索引、值）{ ComboBox=$（模式）.clone（）

})为有问题的其他人发帖。问题解决了

JavaScrit

<script type="text/javascript">
$(document).ready(function() {
    var oTable = $('#example').dataTable(
    {
        "bProcessing" : true,
        "bServerSide" : true,
        "sPaginationType" : "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
                "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                    {
                        "sExtends": "copy",
                        "sButtonText": "Copy"
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "Print"
                    },
               {
                   "sExtends":    "collection",
                   "sButtonText": "Save",
                   "aButtons":    [ "csv", "pdf" ]
               }
            ]
        },
        "autoWidth": true,
        "sAjaxSource" : "Load_Arm.php",
        "aoColumns" : [
                {
                    "sClass" : "readonly",
                    "sTitle": "ID",
                    "aTargets": [0]
                },     
                {
                    "sClass" : "readonly",
                    "sTitle": "ARM",
                    "aTargets": [1]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "CITY",
                    "aTargets": [2]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "REG",
                    "aTargets": [3]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "QNTD",
                    "aTargets": [4]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "SIZE",
                    "aTargets": [5]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_START",
                    "aTargets": [6]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_END",
                    "aTargets": [7],
                    "type": "date"
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DAYS",
                    "aTargets": [8]
                }
        ],
        "fnDrawCallback" : function() {
            $('td.readonly').on('click', function (e) {

                var id = oTable.fnGetData($(this).parents('tr')[0])[0];
                var arm = oTable.fnGetData($(this).parents('tr')[0])[1];
                var city = oTable.fnGetData($(this).parents('tr')[0])[2];                                        

              dialog = $( "#users-contain" ).dialog({
                  autoOpen: false,
                  height: 500,
                  width: 900,
                  title: "Info Arm",
                  modal: true,
                  open: function( event, ui ) {
                      $( "#users tbody" ).append( "<tr>" +
                          "<td>" + id + "</td>" +
                          "<td>" + arm + "</td>" +
                          "<td>" + city + "</td>" +
                             "</tr>" );

                      $.ajax({
                            url:'Tec_combo.php',
                            type:'POST',
                            data:'clust=' + city,
                            dataType: 'json',
                            success: function( json ) {
                            $.each(json, function(i, value) {  
                             $('<option></option>', {text:value}).attr('value', value).appendTo('#names');
                                });
                            }
                          });

                  },
                  close: function( event, ui ) {
                      $("#users tbody").empty();
                      $("#names").empty();
                   },
                  buttons: {
                    "OK": function(){
                        dialog.dialog( "close" );
                    },
                    Cancel: function() {
                      dialog.dialog( "close" );
                    }
                  }
                });

              dialog.dialog("open");
            } );
        }   
    });                                     
);
</script>


$（文档）.ready（函数（）{
var oTable=$（“#示例”）.dataTable(
{
“bProcessing”：正确，
“bServerSide”：正确，
“sPaginationType”：“完整编号”，
“dom”：“Tlfrtip”，
“表格工具”：{
“sSwfPath”：“media/swf/copy_csv_xls_pdf.swf”，
“阿布顿”：[
{
“复制”，
“sbuttonext”：“复制”
},
{
“性倾向”：“打印”，
“sbuttonext”：“打印”
},
{
“性倾向”：“收藏”，
“sbuttonext”：“保存”，
“阿布顿”：[“csv”，“pdf”]
}
]
},
“自动宽度”：正确，
“sAjaxSource”：“Load_Arm.php”，
“aoColumns”：[
{
“sClass”：“只读”，
“针”：“ID”，
“阿塔奇
<script type="text/javascript">
$(document).ready(function() {
    var oTable = $('#example').dataTable(
    {
        "bProcessing" : true,
        "bServerSide" : true,
        "sPaginationType" : "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
                "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                    {
                        "sExtends": "copy",
                        "sButtonText": "Copy"
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "Print"
                    },
               {
                   "sExtends":    "collection",
                   "sButtonText": "Save",
                   "aButtons":    [ "csv", "pdf" ]
               }
            ]
        },
        "autoWidth": true,
        "sAjaxSource" : "Load_Arm.php",
        "aoColumns" : [
                {
                    "sClass" : "readonly",
                    "sTitle": "ID",
                    "aTargets": [0]
                },     
                {
                    "sClass" : "readonly",
                    "sTitle": "ARM",
                    "aTargets": [1]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "CITY",
                    "aTargets": [2]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "REG",
                    "aTargets": [3]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "QNTD",
                    "aTargets": [4]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "SIZE",
                    "aTargets": [5]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_START",
                    "aTargets": [6]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_END",
                    "aTargets": [7],
                    "type": "date"
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DAYS",
                    "aTargets": [8]
                }
        ],
        "fnDrawCallback" : function() {
            $('td.readonly').on('click', function (e) {

                var id = oTable.fnGetData($(this).parents('tr')[0])[0];
                var arm = oTable.fnGetData($(this).parents('tr')[0])[1];
                var city = oTable.fnGetData($(this).parents('tr')[0])[2];                                        

              dialog = $( "#users-contain" ).dialog({
                  autoOpen: false,
                  height: 500,
                  width: 900,
                  title: "Info Arm",
                  modal: true,
                  open: function( event, ui ) {
                      $( "#users tbody" ).append( "<tr>" +
                          "<td>" + id + "</td>" +
                          "<td>" + arm + "</td>" +
                          "<td>" + city + "</td>" +
                             "</tr>" );

                      $.ajax({
                            url:'Tec_combo.php',
                            type:'POST',
                            data:'clust=' + city,
                            dataType: 'json',
                            success: function( json ) {
                            $.each(json, function(i, value) {  
                             $('<option></option>', {text:value}).attr('value', value).appendTo('#names');
                                });
                            }
                          });

                  },
                  close: function( event, ui ) {
                      $("#users tbody").empty();
                      $("#names").empty();
                   },
                  buttons: {
                    "OK": function(){
                        dialog.dialog( "close" );
                    },
                    Cancel: function() {
                      dialog.dialog( "close" );
                    }
                  }
                });

              dialog.dialog("open");
            } );
        }   
    });                                     
);
</script>

<div id="users-contain">
<table id="users">
    <thead>
        <tr>
            <th>Id</th>
            <th>Arm</th>
            <th>City</th>
            <select id="names"></select>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</div>