这是我尝试使用datatable插件的页面代码,但无法正常工作。我为数据表构建了自定义脚本。表格ID名称=表格
@extends('layouts.app')
@section('content')
<link rel='stylesheet' href='app/js/30bc673ce76f73ecf02568498f6b139269f6e4c7.css'/>
<section class="admin-content">
<div class="bg-dark">
<div class="container m-b-30">
<div class="row">
<div class="col-12 text-white p-t-40 p-b-90">
<h4 class="">
Datatables
</h4>
<p class="opacity-75 ">
<a class="text-underline" target="_blank" href="https://datatables.net/">DataTables</a> is a
plug-in for the jQuery Javascript library. <br>
It is a highly flexible tool, build upon the foundations of progressive enhancement, <br>
that adds all of these advanced features to any HTML table.
</p>
</div>
</div>
</div>
</div>
<div class="container pull-up">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive p-t-10">
<table id="tables" class="table " style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script type="text/javascript">
//keep a note of our datatable
var oTable;
$(document).ready(function() {
var table_initialised = false;
$("#tables").tabs();
//bind the loading of the table to the tab select event so that we don't waste time and database effort
$('#tables').bind('tabsselect', function(event, ui) {
if (ui.index == 1) {
if (table_initialised == false) {
//build the table from scratch
table_initialised = true;
oTable = $('#alerts').dataTable({
"aaSorting": [[0, 'desc']],
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "alerts.json.aspx"
});
} else {
//redraw the table
oTable.fnDraw();
}
};
});
})
</script>
<script src='app/js/9556cd6744b0b19628598270bd385082cda6a269.js'></script>
<!--page specific scripts for demo-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
@endsection
这是插入插件后的视图: