javascript - JavaScript/jQuery：如何在显示 Bootstrap 模式后运行 DataTables

Question

我有下面的代码。在 Chrome 中，90% 的时间，它显示一个模态，数据表运行，然后当它加载时，模态消失。

知道为什么它没有 100% 的时间做到这一点吗？在 IE 10+ 中，它接近 1% 的时间。

有没有更简洁的方法来做到这一点？

我基本上想首先显示一个模式，然后在数据加载完成后，让对话框开始。

当我将 AJAX 与 DataTables 一起使用时，会显示处理消息，但现在不显示了 - 有没有办法使用下面的方法来显示这个？

var bonza = this;

$('#vehicle_modal').on('shown.bs.modal', function (e) {

    $('#vehicle tfoot th.search_on_this').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    var dataSet = JSON.parse(bonza.data.js.vehicleData);
    var table = $('#vehicle').DataTable(
    {
        data: dataSet,
        processing: true,
        'language':{ 
          "loadingRecords": "Please wait whilst the table is being populated with data",
           "processing": "Please wait whilst the table is being populated with data"
        },
        "pageLength": 50,
        "scrollY": 300,
        "scrollX": true,
        "order": [[ 12, "desc" ]],
        //"autoWidth": false,
        "columnDefs": [
            //{ "width": "75px", "targets": [0,1,3,4] },
            { "width": "150px", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21] },
            //{ "width": "200px", "targets": [6,7] },
            { "targets": [ 22,23 ],"visible": false, "searchable": true
        }
        ],
        "createdRow": function ( row, data, index ) {

            $('td', row).eq(12).addClass('border-right');
            $('td', row).eq(15).addClass('border-right');
            $('td', row).eq(18).addClass('border-right');

            if ( data[12] > 53) {
                $(row).addClass("red");
            }

            if ( data[12] > 21 && data[12] < 54) {
                $(row).addClass("orange");
            }
        },
         "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var id = aData[22];
            $(nRow).attr("data-vehicle-id", id);
            return nRow;
        }
        ,
        initComplete: function () {
            $('#vehicle_modal').modal('hide')
            this.api().columns([0,1,6,9]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
            $('#vehicle').DataTable().columns.adjust()
        }
    }
    );


    $('#vehicle tbody').on('click', 'tr', function () {
        var id = $(this).data("vehicle-id");
        var left = (screen.width/2)-(900/2);
        return window.open('/app/account/vehicle-edit/id/'+id, 'Vehicle Recovery', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=900, height=600, top=50, left='+left);

    });

    $('#all').on('click', function () {
        event.preventDefault();
        table.columns(23).search('').draw();
    });

    $('#active').on('click', function () {
        event.preventDefault();
        table.columns(23).search('').draw();
        table.columns(23).search('NO').draw();
    });

    $('#inactive').on('click', function () {
        event.preventDefault();
        table.columns(23).search('').draw();
        table.columns(23).search('YES').draw();
    });

    // Apply the search
    table.columns([2,3,4,5,7,8,10,11,12,13,14,15,16,17,18,19,20,21]).every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search('"'+ this.value+'"')
                    .draw();
            }
        } );
    } );

})

$('#vehicle_modal').modal('show');

标签： javascriptjquerydatatablesbootstrap-modal