将数据从服务器端数据表传递到模态 | dataTable 的自定义行按钮

Question

我从 datatables.net 获得了这个教程，并将其实施到我的测试页面中。 https://editor.datatables.net/examples/advanced/joinSelf。我的问题是我无法将所选数据传递到模态中，模态甚至无法打开。

编辑：这是代码。

index.php

<table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Series No</th>
                        <th>Account Type</th>
                        <th>Tools</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Series No</th>
                        <th>Account Type</th>
                        <th>Tools</th>
                    </tr>
                </tfoot>
            </table>
  <?php include 'includes/account_type_modal.php'; ?>

这是index.php

中的脚本

<script>

$(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "account_type_table.php",
        "table": "#example",
        "fields": [ {
                "label": "Series No:",
                "name": "seriesno"
            }, {
                "label": "Account Type:",
                "name": "accounttype"
            }
        ]
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "account_type_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "seriesno" },
            { data: "accounttype" },
            { "data": "seriesno", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
                return "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.seriesno+"'><i class='fa fa-edit'></i> Edit</button> <button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.seriesno+"'><i class='fa fa-trash'></i> Delete</button>";}
                        }
        ],
        select: false,
        buttons: []
    } );
} );

$(function(){
  $("body").on('click', '.edit', function (e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $("body").on('click', '.delete', function (e){
    e.preventDefault();
    $('#delete').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });
});

这是account_type_table.php

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../dataTables/lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'accounttype' )
    ->fields(
        Field::inst( 'seriesno' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A first name is required' ) 
            ) ),
        Field::inst( 'accounttype' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A last name is required' )  
            ) )
            )
    ->process( $_POST )
    ->json();
?>

这是模态。 includes/account_type_modal.php

<!-- Edit -->
<div class="modal fade" id="edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Update Founder Data</b></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="POST" action="account_type_edit.php">
                    <input type="hidden" class="decid" name="id">
                    <div class="form-group">
                    <label for="edit_account_type_id" class="col-sm-3 control-label">Group ID</label>

                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="edit_account_type_id" name="edit_account_type_id" required>
                    </div>
                </div>
                  <div class="form-group">
                    <label for="edit_accounttype" class="col-sm-3 control-label">Account Type</label>

                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="edit_accounttype" name="edit_accounttype" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-success btn-flat" name="edit"><i class="fa fa-check-square-o"></i> Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

  {

<!-- begin snippet: js hide: false console: true babel: false -->

                        "data": "YourDataID", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {

                            return "<input type='button' id='Editbtn' class='btn btn-primary' value='Edit'/>";
                            }
                        }

将数据从服务器端数据表传递到模态 | dataTable 的自定义行按钮

Passing of data from Server-Side dataTable to a modal | Custom Row Button for dataTable

html

php

ajax

datatable

sqlsrv