Cześć, próbuję skonfigurować pliki danych do pracy z require.js. Nie mam problemu z tym, że działa za pomocą zwykłych tagów skryptów, ale w pliku require.js kończy się niepowodzeniem i wyświetla się komunikat o błędzie undefined is not function
, gdy próbuję zainicjować moją tabelę danych.
Poniżej znajduje się mój kod:
require.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone',
'jquery.bootstrap': 'lib/bootstrap.min',
'jquery.dataTables' : 'lib/jquery.dataTables',
'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jquery.bootstrap': {
deps: ['jquery']
},
'bootstrap.datepicker': {
deps: ['jquery.bootstrap']
}
}
});
require(['jquery', 'jquery.bootstrap','jquery.dataTables','bootstrap.datepicker'],
function () {
var element = {
"roeid": "TB582552763",
"reportDate": "20140520",
"status": "R",
"rejReason": "Missing Order",
"rejType": "Context",
"roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
};
var data = [];
for (var i = 0; i < 100; i++) {
data.push(element);
};
var columns = [{
sTitle: 'ROEID',
data: 'roeid'
}, {
sTitle: 'Report Date',
data: 'reportDate'
}, {
sTitle: 'Status',
data: 'status'
}, {
sTitle: 'Rej Reason',
data: 'rejReason'
}, {
sTitle: 'Rej Type',
data: 'rejType'
}, {
sTitle: 'roeid',
data: 'roe'
}];
$(function() {
var oatsTable = $('#oatsTable').DataTable({
data: data,
columns: columns
});
$('#oatsTable tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
console.log(oatsTable.row(this).data());
console.log(oatsTable.rows('.selected').data().length + ' row(s) selected');
});
$('#oats-upload-file').click(function () {
$('#oats-file-upload-modal').modal('show');
});
$('#oats-file-submit').click(function () {
$('#oats-file-upload-modal').modal('show');
});
});
});
AKTUALIZACJA
Ponieważ DataTables identyfikuje się jako nazwany moduł, tak samo jak jquery, wszystko, co musiałem zrobić, aby działało, aby używać tej samej nazwy co nazwany moduł, zmieniając nazwę zależności „jquery.dataTables” na „datables” w pliku require.config paths, poniżej znajduje się działający kod
require.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone',
'jquery.bootstrap': 'lib/bootstrap.min',
'datatables' : 'lib/jquery.dataTables',
'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jquery.bootstrap': {
deps: ['jquery']
},
'bootstrap.datepicker': {
deps: ['jquery.bootstrap']
}
}
});
require(['jquery', 'jquery.bootstrap','datatables','bootstrap.datepicker'],
function () {
var element = {
"roeid": "TB582552763",
"reportDate": "20140520",
"status": "R",
"rejReason": "Missing Order",
"rejType": "Context",
"roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
};
var data = [];
for (var i = 0; i < 100; i++) {
data.push(element);
};
var columns = [{
sTitle: 'ROEID',
data: 'roeid'
}, {
sTitle: 'Report Date',
data: 'reportDate'
}, {
sTitle: 'Status',
data: 'status'
}, {
sTitle: 'Rej Reason',
data: 'rejReason'
}, {
sTitle: 'Rej Type',
data: 'rejType'
}, {
sTitle: 'roeid',
data: 'roe'
}];
$(function() {
var oatsTable = $('#oatsTable').DataTable({
data: data,
columns: columns
});
$('#oatsTable tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
console.log(oatsTable.row(this).data());
console.log(oatsTable.rows('.selected').data().length + ' row(s) selected');
});
$('#oats-upload-file').click(function () {
$('#oats-file-upload-modal').modal('show');
});
$('#oats-file-submit').click(function () {
$('#oats-file-upload-modal').modal('show');
});
});
});