Skip to content

Instantly share code, notes, and snippets.

@omegachien

omegachien/datatable.ajax.blade.php

Created March 10, 2019 06:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save omegachien/6c1c6a3c557b65b524aab16970dbd7ff to your computer and use it in GitHub Desktop.
Save omegachien/6c1c6a3c557b65b524aab16970dbd7ff to your computer and use it in GitHub Desktop.
Download ZIP
DataTable Example - Load Data via Ajax
Raw
datatable.ajax.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<title>DataTable Sample</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row m-5">
<div class="col-12">
<table id="book-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
<script>
$(document).ready(function () {
$('#book-table').DataTable({
processing: true,
language: {
processing: '<span>Processing</span>',
},
serverSide: true,
ajax: '{{ route('books.query') }}',
columns: [
{ data: 'name' },
],
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment