0

如上所述，我的数据表没有使用上面主题行中提到的版本填充！

下面是我的一些代码以及代码片段。

oSupplierTable = $( "#supplier-table" ).dataTable({
			ajax: "{{ url( 'admin/supplier/get-suppliers' ) }}"
			,columns: [
				{
					data:   "supplier_id",
					render: function ( data, type, row ) {
						if ( type === 'display' ) {
							return "<input class=\"editor-active\" type=\"checkbox\" value=" + data + " />";
						}
						return data;
					},
					className: "dt-body-center"
				}
				,{ "class": "nowrap", "data": 'supplier_name', "targets": 2 }
				,{ "data": 'supplier_reference', "targets": 3 }
				,{ "data": 'department', "targets": 4 }
				,{ "data": 'contact_person', "targets": 5 }
				,{ "data": 'telephone_number', "targets": 6 }
				,{ "data": 'email', "targets": 7 }
				,{
					data:   "supplier_id",
					render: function ( data, type, row ) {
						if ( type === 'display' ) {
							return "<a onclick=\"open_supplier_dialog('" + data + "');\">Edit</a>&nbsp;<a onclick=\"delete_supplier('" + data + "');\">Delete</a>";
						}
						return data;
					},
					className: "dt-body-center"
				}
			]
			,fixedColumns:   {
				leftColumns: 1,
				rightColumns: 1
			}
			,"pagingType": "full_numbers"
			,processing: true
			,serverSide: true
			,scrollCollapse: true
			,scrollX: true
			,stateSave: true
		});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" rel="stylesheet"/>
<table class="dataTable" id="supplier-table">
		<thead>
            <tr>
                <th>Select</th>
                <th>Supplier&nbsp;Name</th>
                <th>Package&nbsp;Ref&nbsp;/&nbsp;Name</th>
                <th>Department</th>
                <th>Contact&nbsp;Person</th>
				<th>Telephone&nbsp;Number</th>
				<th>Email</th>
				<th>Action</th>
            </tr>
        </thead>
		<tfoot>
            <tr>
                <th>Select</th>
                <th>Supplier&nbsp;Name</th>
                <th>Package&nbsp;Ref&nbsp;/&nbsp;Name</th>
                <th>Department</th>
                <th>Contact&nbsp;Person</th>
				<th>Telephone&nbsp;Number</th>
				<th>Email</th>
				<th>Action</th>
            </tr>
        </tfoot>
	</table>

这是我的routes/web.php文件的片段：

Route::get('admin/supplier/get-suppliers', 'Auth\SupplierController@getData');

这是我的Controller的片段：

use App\Models\Supplier as supplier;
use Yajra\Datatables\Datatables;

class SupplierController extends Controller
{
    public function getData() {
        return Datatables::of(Supplier::query())->make(true);
    }
....
}

这是我的模型的片段：

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
use Yajra\DataTables\DataTable;

class Supplier extends Model
{
    public static function getSupplier(Supplier $model) {
        return $model->all();
    }
....
}

查看开发者工具 > 网络 > 预览时数据返回正确，如下图所示：

> {draw: 1, recordsTotal: 1, recordsFiltered: 1,…}
data: [{supplier_id: "1", supplier_name: "NOX Rentals", supplier_reference: "", department: "", 
…}]        
draw: 1
input: {draw: "1", columns: [{data: "supplier_id", name: null, searchable: "true", orderable: "true",…},…],…}
queries: [{,…},…]
recordsFiltered: 1
recordsTotal: 1
4

1 回答 1

0

我发现我遇到的问题是我的问题！

我引用了 jQuery 两次，一次是在标签<head>之前的底部，一次是在底部</body>，因此 dataTable 无法正确呈现。

以下是该问题的代码片段：

<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    ...
</head>
<body>
    ....
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
    ...
</body>

这是解决方案：

<head>
    <!-- Scripts -->
    <!-- <script src="{{ asset('js/app.js') }}" defer></script> -->
    ...
</head>
<body>
    ....
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
</body>
于 2020-04-29T16:13:17.610 回答