Question

当用户单击oa链接时，它会执行ajax，当我从ajax结果得到一个包含div和表的html时，实际上只是一个表...我想使用库DataTables来获得这个特定的结果< BR />

<html>
<body>
<ul>
 <li><a href="#" id="link1">Click</a></li>
</ul>
<div class="results" id="result1"></div>

<script>
$("#link1").on('click', function(e){
 e.preventDefault;
$.ajax({
    url: 'ajax.php',
    data: { id: ids},
    dataType: 'html',
    type: 'GET',
    cache: false,
    success: function(data){
         $('#result1).html(data);
    },
        error: function(data){
        console.log(data);
        }
    })
})
</script>
</body>
</html>

所以ajax输出的所有东西都是基本的html

<div class="row">
  <div class="col-sm-12">
     <h4>Some title</h4>
     <h5>A sub-title...</h5>

     <div class="table-responsive">
       <table class="table" id="ajax_table">
          <thead>
            <tr>
              <th>Some 1</th>
              <th>Some 2</th>
              <th>Some 3</th>
            </tr>
           </thead>
          <tbody>
            <tr>
              <td>T1</td>
              <td>T2</td>
              <td>T3</td>
            </tr>
            // a whole bunch of rows.. about 100...
          </tbody>
       </table>
     </div>
  </div>
</div>

那么如何使用DataTables从ajax“重新绘制”该表？... 数据表库之前只用CSS，jquery，bootstraps等来加载......我可以问其他人在哪里创建表来添加数据表脚本

$('#ajax_table').DataTable({
    dom: 'Blfrtip',
    buttons: [
        'csv', 'excel', 'pdf', 'print'
    ]
});

但是我怎么执行，因为它会附带html和脚本？...

Answer 1

尝试在ajax成功后重新初始化数据表

$.ajax({
    url: 'ajax.php',
    data: {
        id: ids
    },
    dataType: 'html',
    type: 'GET',
    cache: false,
    success: function(data) {
        $('#result1).html(data);
            },
            error: function(data) {
                console.log(data);
            }
    })
})
$('#ajax_table').dataTable().fnDestroy();
$('#ajax_table').dataTable({
    "aoColumns": [{
            "bSortable": false
        },
        null, null, null, null
    ]
});

在ajax

1 个答案: