Bootstrap 3.2 modal พร้อม Datatables 1.10 API row.add

ฉันใช้คลาสโมดอลของ Bootstrap 3 และ Datatables 1.10 เพื่อสร้างกล่องโต้ตอบโมดอลการยืนยันที่มีไดนามิก DataTable แต่ละครั้งที่มีการแสดงโมดอล ฉันต้องแทนที่แถวในตาราง ดังนั้นฉันจึงใช้ DataTables API เพื่อล้างและเพิ่มแถวแบบไดนามิก ปัญหาที่ฉันมีคือ DataTables กำลังสร้างตารางใหม่และเพิ่มแถวเข้าไป แทนที่จะเพิ่มแถวลงในตารางที่มีอยู่ซึ่งมีส่วนหัว ด้านล่างนี้คือมาร์กอัป จาวาสคริปต์ และลิงก์ไปยัง JSFiddle บางส่วนที่แสดงให้เห็นพฤติกรรมนี้

ฉันทำอะไรผิดที่นี่? นี่เป็นข้อผิดพลาดของ DataTable หรือไม่

JSFiddle ที่แสดงให้เห็นพฤติกรรมนี้

html

<body>
<div id="theModal" class="modal fade" hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <h4 class="modal-title">Confirmation</h4>
       </div>
       <div class="modal-body">
         <div>
             <table id="foobar" class="table table-condensed table-striped table-bordered small">
                 <thead>
                     <th>col 1</th>
                     <th>col 2</th>
                     <th>col 3</th>
                     <th>col 4</th>
                 </thead>
                 <tbody>
                 </tbody>
             </table>
         </div>
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <a href="/th#" id="theButton" role="button" class="btn btn-primary" >show modal</a>
        </div>
    </div>
</div>
</body>

จาวาสคริปต์

var theTable;
$(document).ready(function(){

    $('#theButton').click(function(e) {
            // just illustrating my dynamic data....
            var data = ['data 1', 'data 2', 'data 3', 'data 4']
            showTheModalTable(data);
    });

    theTable = $('#foobar').dataTable({
        "searching": false,
        "ordering": false,
        "paging" : false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "info" : true
    });

});

function showTheModalTable(data){

    theTable.api().clear();        
    theTable.api().row.add(data);

    $('#theModal').modal();
    theTable.api().draw();  
}

jquery twitter-bootstrap-3 jquery-datatables
person MarkOfHall    schedule 03.12.2014    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

http://jsfiddle.net/2Lo1qzk2/12/

dataTable มีปัญหาเมื่อตารางถูกซ่อนเมื่อสร้าง ใช้เหตุการณ์กิริยาที่แสดง.bs.modal และในขณะนั้นให้กำหนด dataTable ของคุณและเพิ่มแถว

var theTable;
$(document).ready(function () {

    $('#theButton').click(function (e) {

        showTheModalTable();
    });

    theTable = $('#foobar').dataTable({
        "searching": false,
            "ordering": false,
            "paging": false,
            "scrollY": "300px",
            "scrollCollapse": true,
            "info": true
    });

});

function showTheModalTable() {
    $('#theModal').modal();
}

$('#theModal').on('shown.bs.modal', function (e) {
    var data = ['data 1', 'data 2', 'data 3', 'data 4']
    theTable.api().clear();

    theTable.api().row.add(data).draw();
})
person dm4web    schedule 04.12.2014