我正在尝试实现数据表插件,但无法正常工作

时间:2019-09-22 11:58:46

标签: jquery html laravel plugins datatable

这是我尝试使用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

这是插入插件后的视图:

This is view after put the plugin

0 个答案:

没有答案