首页 > 解决方案 > 如何使用 jquery 或 javascript 从数据表中获取已编辑的数据

问题描述

我有一个数据表,并且我有一个可编辑的列 int。当我编辑该列(进行一些值更改)时,单击表外的按钮,我想用新输入的数据收集编辑后的行。

任何人都可以帮忙。

我试过这个

$('#dataTableId tbody').on( 'change', 'tr', function () {
           alert( table.row( this ).data() );
          } );

但上面没有显示编辑后的数据

这是我的数据表:


    function  createDataTable(tableData){
        var table =  $('#dataTableId').DataTable({

              responsive: true,
              searching: false,
              select: true,
              "stripeClasses": [ 'odd', 'even'],
              paging: false,
              info: false,
                data: tableData,

                'columnDefs': [{
                     /* width: '20%', targets: 0, */
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'checkboxes': {
                        'selectRow': true
                     },
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta){
                 return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
             }
                 },
                 {
                 "targets": 3 ,
                 'className': 'dt-body-center',
                    'render': function (data, type, full, meta){
                 return '<input type="text" name="id[]">';
                 }
                 }

                ],
                 dom: '1Bfrtip',
                 select: {
                    style:    'multi'//,//os
                    //selector: 'td:first-child'
                },
                 destroy: true,
                 'order': [[1, 'asc']],
                "columns": [
                             {"title":"",
                                targets: 0,
                                data: null,
                                defaultContent: '',
                                "className": "dt-center1 dt-center2 dt-ownershipColor dt-checkboxes-cell",
                                orderable: false
                            },
                             { "title":"BusinessName",
                                 "className": "dt-center1 dt-center3 dt-ownershipColor hidden-xs",
                             },
                             { "title":"Alternate1 ",
                                 "className": "dt-center1 dt-center2 dt-ownershipColor hidden-xs",

                             },
                             { "title":"Alternate2",
                                 "className": "dt-center1 dt-center2 dt-ownershipColor hidden-xs",

                             }
                          ],
            } );

             $('#dataTableId tbody').on('change', 'input[type="checkbox"]', function() {
            $(this).parent().parent().toggleClass('selected');
            $(this).parent().parent().edit();
        } );

            $("#Deletebtn").click(function(){
             var table = $('#dataTableId').DataTable();
               var rowData = table.rows('.selected').data().toArray();
               alert(rowData);
            });

            $("#Updatebtn").click(function(){
             var table = $('#dataTableId').DataTable();
               var rowData = table.rows('.selected').data().toArray();
               alert(rowData);
            });

            $('#dataTableId tbody').on( 'change', 'tr', function () {
               alert( table.row( this ).data() );
              } );




        }

标签: javascriptjquerydatatables

解决方案


推荐阅读