Mar 25, 2020
0
Level 3
DataTables warning: table id=datatable-fixed-header1 - Invalid JSON response
I am using jQuery DataTables in laravel vuejs and I applied serverside pagination to load the first page only with 5 records when I try to search a record in all table it does not work but the search only works in the 5 loaded data I search in the web and I found that I should set serverSide: true, but when I set that it throws the below error.
DataTables warning: table id=datatable-fixed-header1 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
Jquery datatable code is below
$(document).ready(function() {
var tables = $("#datatable-fixed-header1").DataTable({
retrieve: true,
processing: true,
serverSide: true,
// paging: false,
dom: "t",
paging: true,
// scrollX: true,
lengthChange: true,
searching: true,
ordering: true
});
});
$(document).on("keyup", "#bookSearch", function() {
var tables = $("#datatable-fixed-header1").DataTable({
retrieve: true,
processing: true,
serverSide: true,
// paging: false,
dom: "t",
paging: true,
// scrollX: true,
lengthChange: true,
searching: true,
ordering: true
});
tables.search($(this).val()).draw();
});
Full code in the book.vue is like below
<template>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<div
id="datatable-fixed-header_wrapper"
class="dataTables_wrapper form-inline dt-bootstrap no-footer"
>
<div class="row">
<div class="col-lg-6" style="float:left;margin-left:-213px;">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info btn-flat" type="button">
<i class="fa fa-search"></i>
</button>
</span>
<input type="search" class="form-control" id="bookSearch" placeholder="لټون..." />
</div>
</div>
<div class="col-sm-12">
<table
id="datatable-fixed-header1"
class="table table-striped table-bordered dataTable no-footer"
role="grid"
aria-describedby="datatable-fixed-header_info"
>
<thead>
<tr role="row">
<th style="width:1%;">
<input type="checkbox" @click="selectAll" v-model="allSelected" />
</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label="کوډ: activate to sort column ascending"
>کوډ</th>
<th
class="sorting_asc"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-sort="ascending"
aria-label=": activate to sort column descending"
>نوم</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label=" : activate to sort column ascending"
>کټګورۍ</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label="لیکوال: activate to sort column ascending"
>لیکوال</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label="ژباړن: activate to sort column ascending"
>ژباړن</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label=" : activate to sort column ascending"
>ژبه</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label=" خپرونکی: activate to sort column ascending"
>خپرونکی</th>
<th
class="sorting"
tabindex="0"
aria-controls="datatable-buttons"
rowspan="1"
colspan="1"
aria-label=" تنظیمات : activate to sort column ascending"
>تنظیمات</th>
</tr>
</thead>
<tbody>
<tr
role="row"
class="odd"
v-if="
(Books.data != undefined && Books.data.length == 0) ||
(Books.data != undefined && Books.data.length == '')
"
>
<td colspan="9" align="center">
<p class="text-center alert alert-danger">هیڅ مورد نشته</p>
</td>
</tr>
<tr
role="row"
class="even"
v-else
v-for="Book in Books.data"
v-bind:key="Book.id"
>
<td>
<div class="custom-control custom-checkbox">
<input
class="form-check-input"
type="checkbox"
:value="Book.id"
v-model="checkedRows"
id="chekboxs"
/>
<label class="form-check-label"></label>
</div>
</td>
<td>{{ Book.id }}</td>
<td>{{ Book.name }}</td>
<td>
<span
v-for="category in categories.filter((category)=>Book.category_id === category.id)"
:key="category.id"
style="margin-right: 0.5em"
>{{ category.name }}</span>
</td>
<td>
<span
v-for="Author3 in AuthoreTranslator.filter((Author3)=>Book.author_id === Author3.id)"
:key="Author3.id"
style="margin-right: 0.5em"
>{{ Author3.name }}</span>
</td>
<td>
<span
v-for="Author9 in AuthoreTranslator.filter((Author9)=>Book.translate_id === Author9.id)"
:key="Author9.id"
style="margin-right: 0.5em"
>{{ Author9.name }}</span>
</td>
<td>
<span
v-for="Language in Languagies.filter((Language)=>Book.language_id === Language.id)"
:key="Language.id"
style="margin-right: 0.5em"
>{{ Language.name }}</span>
</td>
<td>
<span
v-for="Publisher in Publishers.filter((Publisher)=>Book.publisher_id === Publisher.id)"
:key="Publisher.id"
style="margin-right: 0.5em"
>{{ Publisher.name }}</span>
</td>
<td>
<a href="#" class="btn btn-primary btn-xs" @click="detailModal(Book)">
<i class="fa fa-folder"></i> نور معلومات
</a>
<a href="#" class="btn btn-info btn-xs" @click="editModal(Book)">
<i class="fa fa-pencil"></i> سمول
</a>
<a href="#" class="btn btn-danger btn-xs" @click="deleteBook(Book.id)">
<i class="fa fa-trash-o"></i> ړنګول
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<pagination :data="Books" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</div>
</div>
<!-- insert modal -->
</template>
<script>
import Datepicker from "vuejs-datepicker";
import Loading from "vue-loading-overlay";
// // // Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";
export default {
components: {
Datepicker,
Loading
},
data() {
return {
Books: {},
selected: [],
allSelected: false,
checkedRows: [],
data: [],
data2: [],
form: new Form({
id: "",
name: "",
category_id: "",
author_id: "",
translate_id: "",
language_id: "",
publisher_id: "",
publishing_date: "",
edition: "",
valume_number: "",
ISBN: ""
})
};
},
computed: {},
methods: {
loadallBooks() {
axios.get("api/Book").then(({ data }) => (this.Books = data));
},
getResults(page = 1) {
this.isLoading = true;
this.color = "red";
// simulate AJAX
setTimeout(() => {
this.isLoading = false;
}, 1000);
axios.get("api/Book?page=" + page).then(response => {
this.Books = response.data;
});
},
loadBooks() {
this.$Progress.start(); // NProgress.start();
axios.get("api/Book").then(({ data }) => (this.Books = data));
axios.get("api/getAllBook").then(({ data }) => (this.data = data));
},
},
mounted() {
this.getResults();
},
created() {
this.loadBooks();
Fire.$on("refreshPage", () => {
this.loadBooks();
});
}
};
$(document).ready(function() {
var tables = $("#datatable-fixed-header1").DataTable({
retrieve: true,
processing: true,
serverSide: true,
// paging: false,
dom: "t",
paging: true,
// scrollX: true,
lengthChange: true,
searching: true,
ordering: true
});
});
$(document).on("keyup", "#bookSearch", function() {
var tables = $("#datatable-fixed-header1").DataTable({
retrieve: true,
processing: true,
serverSide: true,
// paging: false,
dom: "t",
paging: true,
// scrollX: true,
lengthChange: true,
searching: true,
ordering: true
});
tables.search($(this).val()).draw();
});
</script>
Please or to participate in this conversation.