use a datatable in a datable details with scrollX
I'm trying to use a x-scrollable datatable in a datatable row details:
$('#example tbody').on('click', 'td.details-control', function () {
//... cuted for clarity
row.child( format(row.data()) ).show();
tr.addClass('shown');
$('#tid' + row.data().id.toString()).DataTable({
"scrollX": true, // <<<===========================
"data": [{"a": "bla 1","b": "nli 2","c": "ira 3","d": "furor 4", "e":"ira 5"}],
"columns": [
{"data": "a", title: "A"},
{"data": "b", title: "B"},
{"data": "c", title: "C"},
{"data": "d", title: "D"},
{"data": "e", title: "E"},
]
});
}
with the format function as follow:
function format ( d ) {
return '<p>hello!</p><div style="width:99%">'+
'<table id="tid' + d.id.toString() + '" class="table table-bordered nowrap">'+
'<thead></thead><tbody></tbody>'+
'</table></div><p>bye</p>';
}
please consider the followinfng fiddles for execution:
without scrollX
with scrollX
As you can see the header columns aren't aligned (in the details) with the row columns when scrollX is enabled.
I try several things like fixing the table width. But I can't get the table to scroll.
Can this be done ?
twitter-bootstrap datatables
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
add a comment |
I'm trying to use a x-scrollable datatable in a datatable row details:
$('#example tbody').on('click', 'td.details-control', function () {
//... cuted for clarity
row.child( format(row.data()) ).show();
tr.addClass('shown');
$('#tid' + row.data().id.toString()).DataTable({
"scrollX": true, // <<<===========================
"data": [{"a": "bla 1","b": "nli 2","c": "ira 3","d": "furor 4", "e":"ira 5"}],
"columns": [
{"data": "a", title: "A"},
{"data": "b", title: "B"},
{"data": "c", title: "C"},
{"data": "d", title: "D"},
{"data": "e", title: "E"},
]
});
}
with the format function as follow:
function format ( d ) {
return '<p>hello!</p><div style="width:99%">'+
'<table id="tid' + d.id.toString() + '" class="table table-bordered nowrap">'+
'<thead></thead><tbody></tbody>'+
'</table></div><p>bye</p>';
}
please consider the followinfng fiddles for execution:
without scrollX
with scrollX
As you can see the header columns aren't aligned (in the details) with the row columns when scrollX is enabled.
I try several things like fixing the table width. But I can't get the table to scroll.
Can this be done ?
twitter-bootstrap datatables
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
add a comment |
I'm trying to use a x-scrollable datatable in a datatable row details:
$('#example tbody').on('click', 'td.details-control', function () {
//... cuted for clarity
row.child( format(row.data()) ).show();
tr.addClass('shown');
$('#tid' + row.data().id.toString()).DataTable({
"scrollX": true, // <<<===========================
"data": [{"a": "bla 1","b": "nli 2","c": "ira 3","d": "furor 4", "e":"ira 5"}],
"columns": [
{"data": "a", title: "A"},
{"data": "b", title: "B"},
{"data": "c", title: "C"},
{"data": "d", title: "D"},
{"data": "e", title: "E"},
]
});
}
with the format function as follow:
function format ( d ) {
return '<p>hello!</p><div style="width:99%">'+
'<table id="tid' + d.id.toString() + '" class="table table-bordered nowrap">'+
'<thead></thead><tbody></tbody>'+
'</table></div><p>bye</p>';
}
please consider the followinfng fiddles for execution:
without scrollX
with scrollX
As you can see the header columns aren't aligned (in the details) with the row columns when scrollX is enabled.
I try several things like fixing the table width. But I can't get the table to scroll.
Can this be done ?
twitter-bootstrap datatables
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
I'm trying to use a x-scrollable datatable in a datatable row details:
$('#example tbody').on('click', 'td.details-control', function () {
//... cuted for clarity
row.child( format(row.data()) ).show();
tr.addClass('shown');
$('#tid' + row.data().id.toString()).DataTable({
"scrollX": true, // <<<===========================
"data": [{"a": "bla 1","b": "nli 2","c": "ira 3","d": "furor 4", "e":"ira 5"}],
"columns": [
{"data": "a", title: "A"},
{"data": "b", title: "B"},
{"data": "c", title: "C"},
{"data": "d", title: "D"},
{"data": "e", title: "E"},
]
});
}
with the format function as follow:
function format ( d ) {
return '<p>hello!</p><div style="width:99%">'+
'<table id="tid' + d.id.toString() + '" class="table table-bordered nowrap">'+
'<thead></thead><tbody></tbody>'+
'</table></div><p>bye</p>';
}
please consider the followinfng fiddles for execution:
without scrollX
with scrollX
As you can see the header columns aren't aligned (in the details) with the row columns when scrollX is enabled.
I try several things like fixing the table width. But I can't get the table to scroll.
Can this be done ?
twitter-bootstrap datatables
twitter-bootstrap datatables
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
asked Nov 14 '18 at 19:20
tschmit007tschmit007
5,72312032
5,72312032
add a comment |
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
});
}
});
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%2f53307375%2fuse-a-datatable-in-a-datable-details-with-scrollx%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
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.
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%2f53307375%2fuse-a-datatable-in-a-datable-details-with-scrollx%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
