如何在数据表 Ajax 调用后加载远程模式

How to load a remote modal after an Datatable Ajax call

本文关键字：程模式模式加载数据表 Ajax 调用更新时间：2023-09-26

我将如何向此代码添加事件处理程序。我想每行都打开一个远程引导模式，当前数据表结果不会触发 jQuery 打开远程模式。

//输出

<table id="users" cellspacing="0" border="0"
   class="table table table-condensed sortable table-striped table-bordered datatables dataTable no-footer"
   role="grid" aria-describedby="users_info" style="width: 1129px;">
<thead>
<tr role="row">
    <th class="col-md-3 sorting_asc" tabindex="0" aria-controls="users" rowspan="1" colspan="1"
        style="width: 243px;" aria-sort="ascending" aria-label="User ID: activate to sort column ascending">User ID
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;"
        aria-label="User Name: activate to sort column ascending">User Name
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;"
        aria-label="Email: activate to sort column ascending">Email
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 246px;"
        aria-label="Created At: activate to sort column ascending">Created At
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 79px;"
        aria-label="table.actions: activate to sort column ascending">table.actions
    </th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
    <td class="sorting_1">1</td>
    <td>jess</td>
    <td>jess@example.com</td>
    <td>2016-01-24 19:47:26</td>
    <td><a href="#affiliateInfoModal" role="button" class="btn" data-toggle="modal"
           data-load-remote="/get_affiliate_profile/1" data-remote-target="#affiliateInfoModal .modal-body"><i
                    class="fa fa-info fa-lg"></i></a></td>
</tr>
</tbody>

  <!-- Modal -->
<div class="modal fade" id="affiliateInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog-affiliate-info">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

数据表脚本和模式远程加载程序

<script type="text/javascript">
        $(document).ready(function() {
            oTable = $('#users').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "/testdata22",
                "columns": [
                    {data: 'id', name: 'id', sorttable: true},
                    {data: 'username', name: 'username' , sorttable: true},
                    {data: 'email', name: 'email' , sorttable: true},
                    {data: 'created_at', name: 'created_at', sorttable: true},
                    {data: 'actions', name: 'actions', searchable: false}
                ]
            });
        });
    </script>


  <script>
        $('[data-toggle="modal-affiliate-info"]').click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            //var modal_id = $(this).attr('data-target');
            $.get(url, function (data) {
                $(data).modal();
            });
        });
    </script>

这取决于您使用的数据表版本。如果您使用的是旧版（<1.10）版本，请使用 fnInitComplete，否则（>1.10）请使用 initComplete。

例如（版本 <1.10）：

$(document).ready(function() {
        oTable = $('#users').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/testdata22",
            "columns": [
                {data: 'id', name: 'id', sorttable: true},
                {data: 'username', name: 'username' , sorttable: true},
                {data: 'email', name: 'email' , sorttable: true},
                {data: 'created_at', name: 'created_at', sorttable: true},
                {data: 'actions', name: 'actions', searchable: false}
            ],
            "fnDrawCallback": function(oSettings){
                clickable();
            }
        });
    });
function clickable(){
    $('[data-toggle="modal-affiliate-info"]').click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        //var modal_id = $(this).attr('data-target');
        $.get(url, function (data) {
            $(data).modal();
        });
    });
}

我使用非常相似的设置，它可以顺利工作。