JSON在Ajax调用之后代替Datatable显示
JSON在Ajax调用之后代替Datatable显示
提问于 2018-11-01 10:51:45
我对ajax和json相当陌生，非常希望得到一些帮助。我正在对进行Ajax调用，从名为"subjects“的数据库表中返回一些字段，并在Laravel中的DataTable中显示它们。问题是，当我打开视图时，看到的是JSON，而不是Datatable。
，以下是视图主题/索引中返回的内容：
{"draw":0,"recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Biology"},{"id":"3","name":"English Language"},{"id":"4","name":"Physics"},{"id":"5","name":"Chemistry"},{"id":"6","name":"Mathematics"},{"id":"7","name":"Mathematics"},{"id":"8","name":"English Language"},{"id":"9","name":"French"}],"queries":[{"query":"select count(*) as aggregate from (select '1' as `row_count` from `subjects`) count_row_table","bindings":[],"time":4.65},{"query":"select `id`, `name` from `subjects`","bindings":[],"time":0.41}],"input":[]}这里是视图/subjects/索引中的HTML
<table id="subjects_table" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
</tbody>
</table>这里是Laravel中的代码：
class SubjectsController extends Controller
{
public function index()
{
$subjects = Subject::select('id', 'name');
return Datatables::of($subjects)->make(true);
}
}这里是进行Ajax调用的代码：
$('#subjects_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{route('subjects.index')}}",
"columns":[
{"data": "id"},
{"data": "name"}
]
});这里是web.php:中的路由定义
Route::get('subjects/', 'SubjectsController@index')->name('subjects.index');如果你能提供任何帮助，我们将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-01 11:02:31
你应该试试这个：
路线
Route::get('subjects', 'SubjectsController@index')->name('subjects.index');
Route::get('getsubjects', 'SubjectsController@getSubjects')->name('subjects.get');SubjectsController
class SubjectsController extends Controller
{
public function index()
{
return view('subjects.index');
$subjects = Subject::select('id', 'name');
return Datatables::of($subjects)->make(true);
}
public function getSubjects()
{
return \DataTables::of(Subject::query())->make(true);
}
}视图
<table id="subjects_table" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#subjects_table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('subjects.get') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
]
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53099778
复制相关文章
相似问题
腾讯云开发者
