Datatables pagination in custom position
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I would like to move the Datatables pagination to a custom position. The documentation gives reference to the "dom" option but I dont see that it achieves what I'm looking for.
I want to put the pagination buttons in a card-footer. Is there a relatively clean way to do this via DataTables without writing my own pagination.
<div class="card-footer py-4">
<nav>
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<i class="fas fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fas fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
In a related example I was able to override the default behaviour of the search box by hiding the Datatables box in CSS and ooking up my custom search box to Datatables using the js below. I'm hoping theres a similar method for the above issue.
var dataTable = $('#example-table').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
Thanks
html datatables
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
add a comment |
I would like to move the Datatables pagination to a custom position. The documentation gives reference to the "dom" option but I dont see that it achieves what I'm looking for.
I want to put the pagination buttons in a card-footer. Is there a relatively clean way to do this via DataTables without writing my own pagination.
<div class="card-footer py-4">
<nav>
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<i class="fas fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fas fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
In a related example I was able to override the default behaviour of the search box by hiding the Datatables box in CSS and ooking up my custom search box to Datatables using the js below. I'm hoping theres a similar method for the above issue.
var dataTable = $('#example-table').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
Thanks
html datatables
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50
add a comment |
I would like to move the Datatables pagination to a custom position. The documentation gives reference to the "dom" option but I dont see that it achieves what I'm looking for.
I want to put the pagination buttons in a card-footer. Is there a relatively clean way to do this via DataTables without writing my own pagination.
<div class="card-footer py-4">
<nav>
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<i class="fas fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fas fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
In a related example I was able to override the default behaviour of the search box by hiding the Datatables box in CSS and ooking up my custom search box to Datatables using the js below. I'm hoping theres a similar method for the above issue.
var dataTable = $('#example-table').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
Thanks
html datatables
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
I would like to move the Datatables pagination to a custom position. The documentation gives reference to the "dom" option but I dont see that it achieves what I'm looking for.
I want to put the pagination buttons in a card-footer. Is there a relatively clean way to do this via DataTables without writing my own pagination.
<div class="card-footer py-4">
<nav>
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<i class="fas fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fas fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
In a related example I was able to override the default behaviour of the search box by hiding the Datatables box in CSS and ooking up my custom search box to Datatables using the js below. I'm hoping theres a similar method for the above issue.
var dataTable = $('#example-table').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
Thanks
html datatables
html datatables
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
asked Nov 16 '18 at 23:28
CatsLoveJazzCatsLoveJazz
5401927
5401927
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50
add a comment |
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50
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%2f53346693%2fdatatables-pagination-in-custom-position%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%2f53346693%2fdatatables-pagination-in-custom-position%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
Are you using Bootstrap or some responsive framework? You can customize the dom option with any structure you like. Refer to stackoverflow.com/questions/53095022/…, I have explained there how to customize the dom element to a particular Bootstrap structure.
– Shidersz
Nov 17 '18 at 2:55
"I dont see that it achieves what I'm looking for" Then you're not using it properly. Post what you've tried and it's likely someone can help you.
– miken32
Nov 17 '18 at 4:28
I want the pagination to appear after the table element has been closed, How might I do this via the dom option?
– CatsLoveJazz
Nov 17 '18 at 16:50