未捕获的类型错误：无法设置未定义数据表的属性“_DT_CellIndex”
Posted
技术标签:
【中文标题】未捕获的类型错误：无法设置未定义数据表的属性“_DT_CellIndex”【英文标题】：Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined DataTable 【发布时间】：2020-06-28 11:51:23 【问题描述】：我在 laravel/Vuejs 中使用 Datatalbe，数据已完美加载到表格中，但我面临的问题是搜索框未显示，它显示以下错误。
未捕获的类型错误：无法设置未定义的属性“_DT_CellIndex” 在 Ga (jquery.dataTables.min.js:527) 在 M (jquery.dataTables.min.js:279) 在 htmlTableRowElement。 (jquery.dataTables.min.js:287) 在 jquery.min.js:53 在 Function.map (jquery.min.js:197) 在 n.fn.init.map (jquery.min.js:52) 在马 (jquery.dataTables.min.js:285) 在 e (jquery.dataTables.min.js:2264) 在 HTMLTableElement。 (jquery.dataTables.min.js:2269) 在 Function.each (jquery.min.js:170)
我们将不胜感激任何形式的帮助。
stock.vue 页面中的代码如下所示
<template>
<div class="container">
<div class="vld-parent">
<loading
:active.sync="isLoading"
:can-cancel="true"
:on-cancel="onCancel"
:is-full-page="fullPage"
color="#3cb371"
></loading>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>جدول در انبار</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</li>
<li>
<a class="close-link">
<i class="fa fa-close"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div
id="datatable-buttons_wrapper"
class="dataTables_wrapper form-inline dt-bootstrap no-footer"
>
<div class="dt-buttons btn-group" style="margin-bottom:5px;">
<button
class="btn btn-success buttons-copy buttons-html5 btn-sm"
aria-controls="datatable-buttons"
@click="newModal"
>ثبت در انبار جدید</button>
<button
style="margin-left: 10px;"
class="btn btn-danger buttons-copy buttons-html5 btn-sm"
aria-controls="datatable-buttons"
@click="delt"
>حذف چندگانه</button>
<a
href="Report/viewer.php"
target="_blank"
class="btn btn-info buttons-copy buttons-html5 btn-sm"
aria-controls="datatable-buttons"
>
<i class="fa fa-file-text"></i>
گذارشات
</a>
</div>
<div class="row">
<div class="col-sm-12">
<table
id="datatable-fixed-header99"
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"
aria-controls="datatable-buttons"
aria-label="کود: activate to sort column ascending"
>کود</th>
<th
class="sorting_asc"
aria-controls="datatable-buttons"
aria-sort="ascending"
aria-label=": activate to sort column descending"
>نوم</th>
<th
class="sorting"
aria-controls="datatable-buttons"
aria-label=" : activate to sort column ascending"
>د الماری شمیره</th>
<th
class="sorting"
aria-controls="datatable-buttons"
aria-label="پیرودونه شمیره: activate to sort column ascending"
>پیرودونه شمیره</th>
<th
class="sorting"
aria-controls="datatable-buttons"
aria-label=" د کتابونو شمیر : activate to sort column ascending"
>د کتابونو شمیر</th>
<th
class="sorting"
aria-controls="datatable-buttons"
aria-label=" نرخ : activate to sort column ascending"
>نرخ</th>
<th
class="sorting"
aria-controls="datatable-buttons"
aria-label=" نیټه : activate to sort column ascending"
>نیټه</th>
<!-- <th
class="sorting"
aria-controls="datatable-buttons"
aria-label=" تنظیمات : activate to sort column ascending"
>تنظیمات</th>-->
</tr>
</thead>
<tbody v-for="Stock in Stocks.data" v-bind:key="Stock.id">
<!-- <tr
role="row"
class="odd"
v-if="Stocks.data!=undefined && Stocks.data.length == 0 || Stocks.data!=undefined && Stocks.data.length=='' "
>
<td colspan="9" align="center" :v-show="hidebutton=false">
<p class="text-center alert alert-danger">په میز کې هیڅ معلومات نشته</p>
</td>
</tr>-->
<tr role="row" class="even">
<td>
<div class="custom-control custom-checkbox">
<input
class="form-check-input"
type="checkbox"
:value="Stock.id"
v-model="checkedRows"
id="chekboxs"
/>
<label class="form-check-label"></label>
</div>
</td>
<td>Stock.id</td>
<td
v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
:key="`A-$Book.id`"
>Book.name</td>
<td
v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
:key="`B-$sh.id`"
>sh.name</td>
<td
v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
:key="`C-$prbo.id`"
>prbo.id</td>
<!-- <td>two</td> -->
<!-- <td>thrr</td>-->
<td>Stock.quantity</td>
<td>Stock.unitprice</td>
<td>Stock.supplydate </td>
<!-- <td>
<a href="#" class="btn btn-info btn-xs" @click="editModal(Stock)">
<i class="fa fa-pencil"></i> ویرایش
</a>
<a href="#" class="btn btn-danger btn-xs" @click="deleteStock(Stock.id)">
<i class="fa fa-trash-o"></i> حذف
</a>
</td>-->
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<pagination :data="Stocks" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Datepicker from "vuejs-datepicker";
// import GridLoader from "vue-spinner/src/GridLoader.vue";
import Loading from "vue-loading-overlay";
// // // Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";
import "vue-search-select/dist/VueSearchSelect.css";
import ModelSelect from "vue-search-select";
import ModelListSelect from "vue-search-select";
export default
// el: "#wrapper2",
components:
ModelListSelect,
Datepicker,
Loading
,
data()
return
selected: name: null, id: null ,
isLoading: false,
fullPage: true,
hidebutton: true,
seen: false,
color: "blue",
editMode: false,
// Books: ,
// Stocks: ,
Books: [],
Shells: [],
Purchased: [],
Nationalities: ,
Nationalities2: [],
Nationalities3: [],
Book_ids: [],
// Stocks: [],
Stocks: data: [] ,
Stocks2: [],
selected: [],
allSelected: false,
Booksarray: [],
Shellsarray: [],
checkedRows: [],
data: [],
url: "api/getAllStock",
form: new Form(
id: "",
book_id: "",
shell_id: "",
purchase_id: "",
quantity: "",
unitprice: "",
supplydate: ""
)
;
,
computed:
stocksWithBooks()
return this.Stocks.data.map(stock => (
...stock,
books: this.Books.filter(( id ) => id === stock.book_id)
));
// filteredBooks()
// return Object.values(this.Books).filter(
// Book => this.Stock.book_id === Book.id
// );
//
,
mounted: function()
this.alert(); //method1 will execute at pageload
,
methods:
selectAll: function()
this.checkedRows = [];
if (!this.allSelected)
for (user in this.data)
this.checkedRows.push(this.data[user].id);
,
doAjax()
this.isLoading = true;
this.color = "blue";
// simulate AJAX
setTimeout(() =>
this.isLoading = false;
, 1000);
,
onCancel()
console.log("User cancelled the loader.");
,
refrash: function()
$("#addNew").modal("hide");
,
loadallStocks()
axios.get("api/Stock").then(( data ) => (this.Stocks = data));
,
getBook_id: function()
if (this.form.book_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>انتخاب کتاب لازم است.</h5>"
);
this.loadallStocks();
else
this.seen = true;
// this.loader.show();
$(".hideme").show();
// this.$Progress.start();
axios
.get("api/getBybook_ids",
params: book_id: this.form.book_id
)
.then(
function(response)
this.Stocks = response.data.data;
.bind(this)
);
this.seen = false;
,
getshell_id: function()
if (this.form.shell_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>انتخاب الماری لازم است.</h5>"
);
this.loadallStocks();
else
this.seen = true;
// this.loader.show();
$(".hideme").show();
// this.$Progress.start();
axios
.get("api/getByshell_id",
params: shell_id: this.form.shell_id
)
.then(
function(response)
this.Stocks = response.data.data;
.bind(this)
);
this.seen = false;
,
getResults(page = 1)
this.isLoading = true;
this.color = "blue";
// simulate AJAX
setTimeout(() =>
this.isLoading = false;
, 500);
axios
.get("api/Stock?page=" + page)
.then(response =>
this.Stocks = response.data;
)
.then(
function(response)
this.Stocks = response.data.data;
.bind(this)
);
,
updateStock()
if (this.form.book_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفاکتاب را انتخاب نماید .</h5>"
);
else if (this.form.shell_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا الماری را انتخاب نماید.</h5>"
);
else if (this.form.purchase_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا ایدی خریداری را انتخاب نماید.</h5>"
);
else if (this.form.quantity == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5> تعداد لازم است .</h5>"
);
else if (this.form.unitprice == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5> قیمت لازم است.</h5>"
);
else if (this.form.supplydate == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>انتخاب تاریخ لازم است.</h5>"
);
else
this.form
.put("api/Stock/" + this.form.id)
.then(() =>
$("#addNew").modal("hide");
// swal.fire(
// "Updated!",
// "Stock Information updated successfully.",
// "success"
// );
toast.fire(
icon: "success",
type: "warning",
// title: "معلومات در انبار کننده موافقنه تمدید گردید.",
// background: "#ff6f69",
html: "<h5 >معلومات در انبار موافقنه تمدید گردید.</h5> "
);
Fire.$emit("refreshPage");
)
.catch(e =>
console.log(e);
);
,
detailModal(emp1)
this.form.reset();
$("#addNew3").modal("show");
this.form.fill(emp1);
,
printModal(emp)
this.form.reset();
$("#addNew2").modal("show");
// if (seen3 == true)
// seen3 = false;
//
this.form.fill(emp);
,
editModal(Stock)
this.editMode = true;
this.form.reset();
$("#addNew").modal("show");
this.form.fill(Stock);
,
newModal()
this.editMode = false;
this.form.reset();
if (this.Books != undefined && this.Books.length == 0)
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا حداقل یک کتاب را ثبت کنید.</h5>"
);
else if (this.Shells != undefined && this.Shells.length == 0)
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا حداقل یک الماری را ثبت کنید.</h5>"
);
else if (this.Purchased != undefined && this.Purchased.length == 0)
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا حداقل ایدی خریداری را ثبت کنید.</h5>"
);
else
$("#addNew").modal("show");
,
delt()
var chekboxs = document.getElementById("chekboxs");
if (chekboxs.checked || this.allSelected)
swal
.fire(
title: "آیا مطمئن هستید که می خواهید سوابق انتخاب شده را حذف کنید؟",
text: "شما نمی توانید این را برگردانید!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "بلی، حذف نماید!",
cancelButtonText: "لغوه"
)
.then(result =>
//Send request to the server
if (result.value)
axios
.delete("api/multipledeleteStock",
params: id: this.checkedRows
)
.then(() =>
toast.fire(
type: "success",
icon: "success",
html: "<h5>در انبار موافقانه حذف گردید!</h5>"
);
Fire.$emit("refreshPage");
)
.catch(e =>
console.log(e);
);
);
else
toast.fire(
type: "warning",
icon: "warning",
html:
"<h5>شما چیزی را انتخاب نکردید که حذف شود لطفا آن را انتخاب کنید!</h5>"
);
,
deleteStock(id)
swal
.fire(
title: "شما مطمن هستید؟",
text: "شما نمی توانید این را برگردانید!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "بلی، حذف نماید!",
// buttons: ["Select Patient?", "Speed Case?"],
cancelButtonText: "لغوه"
)
.then(result =>
//Send request to the server
if (result.value)
this.form
.delete("api/Stock/" + id)
.then(() =>
toast.fire(
type: "success",
html: "<h5>در انبار موافقانه حذف گردید!</h5>"
);
Fire.$emit("refreshPage");
)
.catch(e =>
console.log(e);
);
);
,
alert()
// axios.get("api/getAllStock").then(( data ) => (this.data = data));
// if (this.Stocks.length <= 3)
// toast.fire(
// type: "warning",
// icon: "warning",
// html: "<h5> تعداد کتابهای موجود کمتر از ۳ جلد میباشد .</h5>"
// );
//
axios.get("api/countstocks").then(response =>
let data = response.data;
// if (data.Total <= 70)
// toast.fire(
// icon: "warning",
// type: "warning",
// html: "<h5> تعداد کتابهای موجود کمتر از 70 جلد میباشد .</h5>"
// );
//
if (data)
data.forEach(element =>
this.Nationalities2.push(element.Total);
this.Book_ids.push(element.book_id);
if (element.Total <= 15)
toast.fire(
icon: "warning",
type: "warning",
html:
"<h5> تعداد کتابهای " +
[element.bookname] +
" کمتر از 15 جلد میباشد .</h5>"
);
);
else
toast.fire(
icon: "warning",
type: "warning",
title: " مشکل."
);
);
,
loadStocks()
// $(".hideme").hide();
// if (this.$gate.isAdmin() || this.$gate.isUser())
this.$Progress.start(); // NProgress.start();
axios.get("api/Stock").then(( data ) => (this.Stocks = data));
axios.get("api/getAllStock").then(( data ) => (this.data = data));
// axios.get("api/getAllBook").then(( data ) => (this.Books = data));
axios
.get("api/getAllBook")
.then(( data ) => (this.Books = Array.isArray(data) ? data : []));
axios
.get("api/getAllShell")
.then(( data ) => (this.Shells = Array.isArray(data) ? data : []));
axios
.get("api/getAllShell")
.then(( data ) => (this.Shellsarray = data));
axios.get("api/getAllBook").then(( data ) => (this.Booksarray = data));
axios
.get("api/getAllPurchase")
.then(( data ) => (this.Purchased = Array.isArray(data) ? data : []));
this.alert();
this.$Progress.finish();
//
// NProgress.done();
,
createStock()
// axios.get("api/chekfunction").then(response =>
// let data = response.data;
if (this.form.book_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفاکتاب را انتخاب نماید .</h5>"
);
else if (this.form.shell_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا الماری را انتخاب نماید.</h5>"
);
else if (this.form.purchase_id == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>لطفا ایدی خریداری را انتخاب نماید.</h5>"
);
else if (this.form.quantity == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5> تعداد لازم است .</h5>"
);
else if (this.form.unitprice == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5> قیمت لازم است.</h5>"
);
else if (this.form.supplydate == "")
toast.fire(
type: "warning",
icon: "warning",
html: "<h5>انتخاب تاریخ لازم است.</h5>"
);
else
// this.convert();
this.form
.post("api/Stock")
.then(() =>
// the below function will be use to reload the page
// this.$emit("refreshPage");
$("#addNew").modal("hide");
toast.fire(
icon: "success",
type: "success",
html: "<h5> در انبار موافقانه اجاد گردید</h5>"
);
Fire.$emit("refreshPage");
this.form.reset();
// this.$Progress.finish();
)
.catch(er =>
console.log(er);
);
,
created()
this.loadStocks();
// load the page after 3 secound
Fire.$on("refreshPage", () =>
this.loadStocks();
);
;
$(document).ready(function()
$("#datatable-fixed-header99").DataTable(
paging: false,
// ordering: false,
info: false,
responsive: true,
bLengthChange: false
);
);
// $(".select3").select3();
</script>
如果我删除这些行，错误就会消失
<!-- <td
v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
:key="`A-$Book.id`"
>Book.name</td>
<td
v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
:key="`B-$sh.id`"
>sh.name</td>
<td
v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
:key="`C-$prbo.id`"
>prbo.id</td>-->
但是我需要使用上面的代码，如果有其他方法请指教。
【问题讨论】：
【参考方案1】：在第一个
<td>
<span v-for="Book in Books.filter((Book) => Stock.book_id === Book.id)"
:key="Book.id" style="margin-right: 0.5em">
Book.name
</span>
</td>
<td>
<span v-for="sh in Shells.filter((sh)=>Stock.shell_id === sh.id)"
:key="sh.id" style="margin-right: 0.5em">
sh.name
</span>
</td>
<td>
<span v-for="prbo in Purchased.filter((prbo)=>Stock.purchase_id === prbo.id)"
:key="prbo.id" style="margin-right: 0.5em">
prbo.name
</span>
</td>
或简单的连接：
<td>
Books.filter((Book) => Stock.book_id === Book.id).map((Book) => Book.name).join(', ') || 'no books'
</td>
<td>
Shells.filter((sh)=>Stock.shell_id === sh.id).map((Stock) => Stock.name).join(', ') || 'no shells'
</td>
<td>
Purchased.filter((prbo)=>Stock.purchase_id === prbo.id).map((prbo) => prbo.name).join(', ') || 'no purchases'
</td>
【讨论】：
以上是关于未捕获的类型错误：无法设置未定义数据表的属性“_DT_CellIndex”的主要内容，如果未能解决你的问题，请参考以下文章