Use multiple jQuery DataTable functions in same Javascript file with different style and ajax Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag? The Ask Question Wizard is Live!jQuery same click event for multiple elementsjQuery Ajax File UploadjQuery multiple events to trigger the same functionhow can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?Datatables - Using Ajax datasource (sAjaxSource) with multiple tables and dynamic argumentdatatables dataSrc function not called on successful ajax responseJQuery datatable not filling from AJAX call despite successful responsecouldn't load the data to the datatable using server side paginationMaking multiple ajax calls with DataTablesAdd an extra defaulContent column depending on a if condition
Can an alien society believe that their star system is the universe?
Book where humans were engineered with genes from animal species to survive hostile planets
Why was the term "discrete" used in discrete logarithm?
How do I keep my slimes from escaping their pens?
List of Python versions
Do I really need recursive chmod to restrict access to a folder?
Compare a given version number in the form major.minor.build.patch and see if one is less than the other
Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?
Is it fair for a professor to grade us on the possession of past papers?
Why do people hide their license plates in the EU?
In predicate logic, does existential quantification (∃) include universal quantification (∀), i.e. can 'some' imply 'all'?
Extract all GPU name, model and GPU ram
Error "illegal generic type for instanceof" when using local classes
Why light coming from distant stars is not discrete?
First console to have temporary backward compatibility
Why do we bend a book to keep it straight?
Can a non-EU citizen traveling with me come with me through the EU passport line?
String `!23` is replaced with `docker` in command line
Using et al. for a last / senior author rather than for a first author
Sci-Fi book where patients in a coma ward all live in a subconscious world linked together
Why are there no cargo aircraft with "flying wing" design?
What is Wonderstone and are there any references to it pre-1982?
How to call a function with default parameter through a pointer to function that is the return of another function?
Should I discuss the type of campaign with my players?
Use multiple jQuery DataTable functions in same Javascript file with different style and ajax
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?
The Ask Question Wizard is Live!jQuery same click event for multiple elementsjQuery Ajax File UploadjQuery multiple events to trigger the same functionhow can I trigger jquery datatables fnServerData to update a table via AJAX when I click a button?Datatables - Using Ajax datasource (sAjaxSource) with multiple tables and dynamic argumentdatatables dataSrc function not called on successful ajax responseJQuery datatable not filling from AJAX call despite successful responsecouldn't load the data to the datatable using server side paginationMaking multiple ajax calls with DataTablesAdd an extra defaulContent column depending on a if condition
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I need to use multiple jQuery DataTable functions in the same Javascript file. I know how to use multiple tables in the same page if the tables have the same style, ajax. However, I need to use multiple tables with different style & ajax. The second table doesn't load completely unless I remove the function for the first table.
$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);jquery datatables
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
add a comment |
1
I need to use multiple jQuery DataTable functions in the same Javascript file. I know how to use multiple tables in the same page if the tables have the same style, ajax. However, I need to use multiple tables with different style & ajax. The second table doesn't load completely unless I remove the function for the first table.
$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);jquery datatables
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
2
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.
– Rory McCrossan
Mar 8 at 17:02
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:.prepend($("<thead></thead>").append($(this).find("tr:first")))The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.
– Shane
Mar 8 at 18:03
add a comment |
1
1
1
I need to use multiple jQuery DataTable functions in the same Javascript file. I know how to use multiple tables in the same page if the tables have the same style, ajax. However, I need to use multiple tables with different style & ajax. The second table doesn't load completely unless I remove the function for the first table.
$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);jquery datatables
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
I need to use multiple jQuery DataTable functions in the same Javascript file. I know how to use multiple tables in the same page if the tables have the same style, ajax. However, I need to use multiple tables with different style & ajax. The second table doesn't load completely unless I remove the function for the first table.
$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);$(function()
$("[id*=Table1]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable(
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"dom": 'lBfrtip',
"order": [
[1, "desc"]
],
"buttons": [
extend: 'print',
,
extend: 'excel',
,
extend: 'pdfHtml5',
title: function()
return "PDF Export";
,
orientation: 'landscape',
pageSize: 'A0',
titleAttr: 'PDF'
],
);
)
}
$(document).ready(function()
$('#Table2').DataTable(
"columnDefs": [
"width": "5%",
"targets": [0]
,
"width": "10%",
"searchable": false,
"orderable": false,
"targets": [7]
,
"className": "text-center custom-middle-align",
"targets": [0, 1, 2, 3, 4, 5, 6, 7]
,
],
"language":
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
,
"processing": true,
"serverSide": true,
"ajax":
"url": "MyMethod.aspx/GetData",
"contentType": "application/json",
"type": "GET",
"dataType": "JSON",
"data": function(d)
return d;
,
"dataSrc": function(json)
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
,
"columns": [
"data": "FirstName"
,
"data": "LastName"
,
"data": "MemberID"
,
"data": "UserID"
,
"data": "ZipCode"
,
"data": "Description"
,
"data": "ExpiryDate"
,
"data": "Action"
],
"buttons": [
'copy', 'excel', 'pdf'
]
);
);jquery datatables
jquery datatables
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
edited Mar 8 at 17:02
Rory McCrossan
251k29217254
251k29217254
asked Mar 8 at 17:00
ShaneShane
10318
asked Mar 8 at 17:00
ShaneShane
10318
asked Mar 8 at 17:00
ShaneShane
10318
10318
2
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.
– Rory McCrossan
Mar 8 at 17:02
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:.prepend($("<thead></thead>").append($(this).find("tr:first")))The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.
– Shane
Mar 8 at 18:03
add a comment |
2
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.
– Rory McCrossan
Mar 8 at 17:02
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:.prepend($("<thead></thead>").append($(this).find("tr:first")))The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.
– Shane
Mar 8 at 18:03
2
2
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched
}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.– Rory McCrossan
Mar 8 at 17:02
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched
}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.– Rory McCrossan
Mar 8 at 17:02
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:
.prepend($("<thead></thead>").append($(this).find("tr:first"))) The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.– Shane
Mar 8 at 18:03
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:
.prepend($("<thead></thead>").append($(this).find("tr:first"))) The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.– Shane
Mar 8 at 18:03
add a comment |
0
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
);
);
draft saved
draft discarded
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%2f55067751%2fuse-multiple-jquery-datatable-functions-in-same-javascript-file-with-different-s%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f55067751%2fuse-multiple-jquery-datatable-functions-in-same-javascript-file-with-different-s%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
2
Check the console for errors. You have at least one syntax error in the JS you've shown - an extra mismatched
}. It's easier to spot now that I've formatted your code correctly. Also note that you can join the two document.ready handler in to one.– Rory McCrossan
Mar 8 at 17:02
@RoryMcCrossan I have corrected the syntax errors and that has fixed part of my problem. The second table loads and there are no errors. However, this line of code in the first table is causing the format of my second table to not display correctly:
.prepend($("<thead></thead>").append($(this).find("tr:first")))The first tables is a grid view that has it's <thead> section inserted automatically. Do you know of a way to ignore this when loading my second table? FYI, the tables are in two separate pages.– Shane
Mar 8 at 18:03