问题描述
我的管理面板使用 https://datatables.net。我需要帮助,当我尝试在表上显示用户数据时,它什么也没显示。一切都在检查中工作,它只是不出来。为什么?
这里是app-user-list.js
的代码 if (dtUserTable.length) {
dtUserTable.DataTable({
"ajax": {
"url": assetPath + 'data/user-list.PHP',"type": "POST"
},// JSON file to add data
columns: [
// columns according to JSON
{ data: 'responsive_id' },{ data: 'full_name' },{ data: 'email' },{ data: 'role' },{ data: 'current_plan' },{ data: 'status' },{ data: '' }
],columnDefs: [
{
// For Responsive
className: 'control',orderable: false,responsivePriority: 2,targets: 0
},{
// User full name and username
targets: 1,responsivePriority: 4,render: function (data,type,full,Meta) {
var $name = full['full_name'],$uname = full['username'],$image = full['avatar'];
if ($image) {
// For Avatar image
var $output =
'<img src="' + assetPath + 'images/avatars/' + $image + '" alt="Avatar" height="32" width="32">';
} else {
// For Avatar badge
var stateNum = Math.floor(Math.random() * 6) + 1;
var states = ['success','danger','warning','info','dark','primary','secondary'];
var $state = states[stateNum],$name = full['full_name'],$initials = $name.match(/\b\w/g) || [];
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toupperCase();
$output = '<span class="avatar-content">' + $initials + '</span>';
}
var colorClass = $image === '' ? ' bg-light-' + $state + ' ' : '';
// Creates full output for row
var $row_output =
'<div class="d-flex justify-content-left align-items-center">' +
'<div class="avatar-wrapper">' +
'<div class="avatar ' +
colorClass +
' mr-1">' +
$output +
'</div>' +
'</div>' +
'<div class="d-flex flex-column">' +
'<a href="' +
userView +
'" class="user_name text-truncate"><span class="font-weight-bold">' +
$name +
'</span></a>' +
'<small class="emp_post text-muted">@' +
$uname +
'</small>' +
'</div>' +
'</div>';
return $row_output;
}
},{
// User Role
targets: 3,Meta) {
var $role = full['role'];
var roleBadgeObj = {
Subscriber: feather.icons['user'].toSvg({ class: 'font-medium-3 text-primary mr-50' }),Author: feather.icons['settings'].toSvg({ class: 'font-medium-3 text-warning mr-50' }),Maintainer: feather.icons['database'].toSvg({ class: 'font-medium-3 text-success mr-50' }),Editor: feather.icons['edit-2'].toSvg({ class: 'font-medium-3 text-info mr-50' }),Admin: feather.icons['slack'].toSvg({ class: 'font-medium-3 text-danger mr-50' })
};
return "<span class='text-truncate align-middle'>" + roleBadgeObj[$role] + $role + '</span>';
}
},{
// User Status
targets: 5,Meta) {
var $status = full['status'];
return (
'<span class="badge badge-pill ' +
statusObj[$status].class +
'" text-capitalized>' +
statusObj[$status].title +
'</span>'
);
}
},{
// Actions
targets: -1,title: 'Actions',Meta) {
return (
'<div class="btn-group">' +
'<a class="btn btn-sm dropdown-toggle hide-arrow" data-toggle="dropdown">' +
feather.icons['more-vertical'].toSvg({ class: 'font-small-4' }) +
'</a>' +
'<div class="dropdown-menu dropdown-menu-right">' +
'<a href="' +
userView +
'" class="dropdown-item">' +
feather.icons['file-text'].toSvg({ class: 'font-small-4 mr-50' }) +
'Details</a>' +
'<a href="' +
userEdit +
'" class="dropdown-item">' +
feather.icons['archive'].toSvg({ class: 'font-small-4 mr-50' }) +
'Edit</a>' +
'<a href="javascript:;" class="dropdown-item delete-record">' +
feather.icons['trash-2'].toSvg({ class: 'font-small-4 mr-50' }) +
'Delete</a></div>' +
'</div>' +
'</div>'
);
}
}
],order: [[2,'desc']],dom:
'<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
'<"col-lg-12 col-xl-6" l>' +
'<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-Nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
'>t' +
'<"d-flex justify-content-between mx-2 row mb-1"' +
'<"col-sm-12 col-md-6"i>' +
'<"col-sm-12 col-md-6"p>' +
'>',language: {
sLengthMenu: 'Show _MENU_',search: 'Search',searchPlaceholder: 'Search..'
},// Buttons with Dropdown
buttons: [
{
text: 'Add New User',className: 'add-new btn btn-primary mt-50',attr: {
'data-toggle': 'modal','data-target': '#modals-slide-in'
},init: function (api,node,config) {
$(node).removeClass('btn-secondary');
}
}
],
还有更多,但这是表。
这是Users/index.blade.PHP
中的代码
@section('title')
Users
@endsection
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- users list start -->
<section class="app-user-list">
<!-- list section start -->
<div class="card">
<div class="card-datatable table-responsive pt-0">
<table class="user-list-table table">
<thead class="thead-light">
<tr>
<th></th>
<th>User</th>
<th>Email</th>
<th>Role</th>
<th>Plan</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
<!-- list section end -->
</section>
<!-- users list ends -->
</div>
</div>
</div>
<!-- END: Content-->
@endsection
这是data/user-list.PHP
中的代码
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simple to show how
* server-side processing can be implemented,and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'users';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database,while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
$columns = array(
array( 'db' => 'id','dt' => 'responsive_id' ),array( 'db' => 'id','dt' => 'id' ),array( 'db' => 'name','dt' => 'name' ),array( 'db' => 'lastname','dt' => 'full_name' ),array( 'db' => 'email','dt' => 'email' ),array( 'db' => 'birthday','dt' => 'current_plan' ),array( 'db' => 'gender','dt' => 'status' ),array( 'db' => 'image','dt' => 'avatar' ),array(
'db' => 'role','dt' => 'role',),array(
'db' => 'name','dt' => 'username',)
);
// sql server connection information
$sql_details = array(
'user' => 'root','pass' => '','db' => 'family_space','host' => '127.0.0.1'
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side,there is no need to edit below this line.
*/
require( 'ssp.class.PHP' );
echo json_encode(
ssp::simple( $_POST,$sql_details,$table,$primaryKey,$columns )
);
我真的需要帮助。我可以解决这个问题吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)