javascript jquery datatable alpaca
I tried to look around the internet, but didn't come across with similar issue.
I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.
The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.
The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.
Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:
let initAlpaca = function () {
$('#table-alpaca').alpaca(alpacaJson);
};
let destroyAlpaca = function () {
$('#table-alpaca').alpaca("destroy");
};
let initDataTables = function () {
if (dataTable == null){
// datatable.destroy(true) destroys table element.
$("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
dataTable = $('#table-data').DataTable({
bPaginate: false,
searchable: true,
search: {
smart: false
},
columns: [
{name:"Fname", title:"Fname"},
{name:"Lname", title:"Lname"},
{name:"Age", title:"Age"},
{name:"Check", title:"Check"},
],
data: [
["John", "Smith", "44", "2000"],
["Mary", "Doe", "54", "2400"],
["Markus", "Example", "30", "3000"]
]
});
}
};
let destroyDataTables = function () {
if (dataTable != null){
dataTable.destroy(true);
dataTable = null;
}
};
Here is a JSFiddle that can demonstrate the issue: JSFiddle
Could this only be an issue under the alpaca("destroy") method?
How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?
Unlike in the JSFiddle, there is no need to show these tables at the same time.
javascript jquery datatables alpacajs
add a comment |
I tried to look around the internet, but didn't come across with similar issue.
I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.
The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.
The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.
Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:
let initAlpaca = function () {
$('#table-alpaca').alpaca(alpacaJson);
};
let destroyAlpaca = function () {
$('#table-alpaca').alpaca("destroy");
};
let initDataTables = function () {
if (dataTable == null){
// datatable.destroy(true) destroys table element.
$("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
dataTable = $('#table-data').DataTable({
bPaginate: false,
searchable: true,
search: {
smart: false
},
columns: [
{name:"Fname", title:"Fname"},
{name:"Lname", title:"Lname"},
{name:"Age", title:"Age"},
{name:"Check", title:"Check"},
],
data: [
["John", "Smith", "44", "2000"],
["Mary", "Doe", "54", "2400"],
["Markus", "Example", "30", "3000"]
]
});
}
};
let destroyDataTables = function () {
if (dataTable != null){
dataTable.destroy(true);
dataTable = null;
}
};
Here is a JSFiddle that can demonstrate the issue: JSFiddle
Could this only be an issue under the alpaca("destroy") method?
How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?
Unlike in the JSFiddle, there is no need to show these tables at the same time.
javascript jquery datatables alpacajs
add a comment |
I tried to look around the internet, but didn't come across with similar issue.
I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.
The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.
The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.
Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:
let initAlpaca = function () {
$('#table-alpaca').alpaca(alpacaJson);
};
let destroyAlpaca = function () {
$('#table-alpaca').alpaca("destroy");
};
let initDataTables = function () {
if (dataTable == null){
// datatable.destroy(true) destroys table element.
$("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
dataTable = $('#table-data').DataTable({
bPaginate: false,
searchable: true,
search: {
smart: false
},
columns: [
{name:"Fname", title:"Fname"},
{name:"Lname", title:"Lname"},
{name:"Age", title:"Age"},
{name:"Check", title:"Check"},
],
data: [
["John", "Smith", "44", "2000"],
["Mary", "Doe", "54", "2400"],
["Markus", "Example", "30", "3000"]
]
});
}
};
let destroyDataTables = function () {
if (dataTable != null){
dataTable.destroy(true);
dataTable = null;
}
};
Here is a JSFiddle that can demonstrate the issue: JSFiddle
Could this only be an issue under the alpaca("destroy") method?
How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?
Unlike in the JSFiddle, there is no need to show these tables at the same time.
javascript jquery datatables alpacajs
I tried to look around the internet, but didn't come across with similar issue.
I have a page which uses alpaca to create a form which has some random alpaca fields as well as a table that the user can fill.
The page also includes another table that is created with DataTable directly, which shows the answers what user has previously filled in. These are seperated by a tab system so that they are not shown both at the same time.
The issue lies in DataTables search function. If you have initialized a table with alpaca (which uses datatables under the hood also), the search method stop functioning properly, resulting 0 results at all times. Destroying the alpaca table does not affect in any way either.
Here I have four simple functions for initializing the tables and destroying them. Initializing, destroying and reinitializing the datatable has no affect on it's search functionality, but once alpaca table is created, the search functionality stops:
let initAlpaca = function () {
$('#table-alpaca').alpaca(alpacaJson);
};
let destroyAlpaca = function () {
$('#table-alpaca').alpaca("destroy");
};
let initDataTables = function () {
if (dataTable == null){
// datatable.destroy(true) destroys table element.
$("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
dataTable = $('#table-data').DataTable({
bPaginate: false,
searchable: true,
search: {
smart: false
},
columns: [
{name:"Fname", title:"Fname"},
{name:"Lname", title:"Lname"},
{name:"Age", title:"Age"},
{name:"Check", title:"Check"},
],
data: [
["John", "Smith", "44", "2000"],
["Mary", "Doe", "54", "2400"],
["Markus", "Example", "30", "3000"]
]
});
}
};
let destroyDataTables = function () {
if (dataTable != null){
dataTable.destroy(true);
dataTable = null;
}
};
Here is a JSFiddle that can demonstrate the issue: JSFiddle
Could this only be an issue under the alpaca("destroy") method?
How could I properly delete possible alpaca datatable instance properly so I can have the other datatable's search functionality work properly?
Unlike in the JSFiddle, there is no need to show these tables at the same time.
javascript jquery datatables alpacajs
javascript jquery datatables alpacajs
edited Nov 23 at 10:05
asked Nov 23 at 9:54
Arbitor
113
113
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444316%2fjavascript-jquery-datatable-alpaca%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444316%2fjavascript-jquery-datatable-alpaca%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown