如何修复PHP,HTML中无法在DataTables上显示的数据
I've just recently discovered DataTables and would like to implement in my web. Followed the instructions for SSP data but it failed to output my data.
I've tried some of the solutions from several other websites but none works.
index.php
<script>
function() {
$('#staff').DataTable( {
processing: true,
serverSide: true,
ajax: {
url: 'data.php',
type: 'POST'
};
} );
}
</script>
data.php
<?php
$table = 'staff';
$primaryKey = 'staff_id';
$columns = array(
array( 'db' => 'staff_id', 'dt' => 0 ),
array( 'db' => 'grade', 'dt' => 1 ),
array( 'db' => 'name', 'dt' => 2 ),
array( 'db' => 'position', 'dt' => 3 ),
array( 'db' => 'cost_centre', 'dt' => 4 ),
array( 'db' => 'station', 'dt' => 5 ),
array( 'db' => 'ic_number', 'dt' => 6 ),
array( 'db' => 'status', 'dt' => 7 )
);
// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => 'feldatransport',
'host' => 'localhost'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>
I would like the data to display in my staff table.
EDIT: I uploaded my file to my repo. Github
UPDATE: Issue has been solved. It was my arrangement of scripts. I put Jquery script lastly thus DataTables isn't able to function properly. Thanks for the help everyone
Does your tag look something like this? The order of which scripts you import first (or missing one) can throw the entire datatables plug-in off.
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables Server-Side Processing</title>
<!-- -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- datatable lib -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
I have a running datatables server-side here: https://databasetable-net.000webhostapp.com/ Sometimes (I do not know why), you have to use $_POST not $_GET in the server.php even though the datatables example uses $_GET. That could be one issue. Anyway, here is my working code. Server.php
<?php
$table = 'employees';
$primaryKey = 'id'; // Table's primary key
$columns = array(
array( 'db' => 'id', 'dt' => 0 ),
array( 'db' => 'first_name', 'dt' => 1 ),
array( 'db' => 'last_name', 'dt' => 2 ),
array( 'db' => 'zip', 'dt' => 3 ),
array( 'db' => 'date', 'dt' => 4 ),
array( 'db' => 'updated', 'dt' => 5 ),
);
$sql_details = array(
'user' => 'username',
'pass' => 'password',
'db' => 'database',
'host' => 'localhost'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_POST, $sql_details, $table, $primaryKey, $columns )
);
?>
Lastly, posting on datatables.net forums is very helpful as this is very specialized code.
Please try to pass value with " ". In my case it is worked with "".
ajax: {
url: "data.php",
type: "POST"
};
Please refer my datatable code if you found useful then revert.
ajax : {
url : "MainController",
type : "POST",
data : {
action : "getAssetListJSON"
}
},
columns : [ {
data : "AssetName",
className: "center"
}, {
data : "HolderName",
className: "center"
}
]
})
;