new to dataTable - couple of questions

ianhaney

I am new to dataTable and slowly getting the hang of it but just got a couple of questions

1) I am trying to create a filter results system but can't seem to get it working for different statuses, the only status that works is the all. Below is the current code I have

<ul class="nav">
                                        <li><a href="#" class="noline" id="pendingsupport"><i class="fa fa-circle-thin" aria-hidden="true"></i> Pending Support<span class="badge pull-right">5</span></a></li>
                                        <li><a href="#" class="noline" id="open"><i class="fa fa-circle-thin" aria-hidden="true"></i> Open<span class="badge pull-right">1</span></a></li>
                                        <li><a href="#" class="noline" id="closed"><i class="fa fa-circle-thin" aria-hidden="true"></i> Closed<span class="badge pull-right">150</span></a></li>
                                        <li><a href="#" class="noline" id="all"><i class="fa fa-circle-thin" aria-hidden="true"></i> All<span class="badge pull-right">187</span></a></li>
                                      </ul>`

`<script>
var dataTables = $('#datatable').DataTable({
    "info": false,
    "lengthChange": false,
    "dom": 'lrtip'
});

$('#all').on('click', function () {
    dataTables.columns(4).search("", true, false, true).draw();    
});

$('#pendingsupport').on('click', function () {
    dataTables.columns(4).search("PENDING SUPPORT", true, false, true).draw();
}); 

$('#open').on('click', function () {
    dataTables.columns(4).search("OPEN", true, false, true).draw();
});
    
$('#closed').on('click', function () {
dataTables.columns(4).search("CLOSED", true, false, true).draw();
});
</script>

2) How do I disable sorting

3) Can I make the previous and next buttons smaller for the pagination and also how do I add 10 rows per page for pagination

Thank you in advance

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

1 We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

2 see ordering

1. the default is 10 rows per page, and this thread from earlier discusses changes button sizes.

Cheers,

Colin

ianhaney

Thank you for the reply Colin, appreciate it. I can send a link to the site but it requires logging in, I can do a screenshot of it if any better.

ianhaney

Think I just got it working with the following code

`

var dataTables = $('#datatable').DataTable({ "info": false, "lengthChange": false, "dom": 'lrtip', "ordering": false }); $('#all').on('click', function () { dataTables.columns(2).search("").draw(); }); $('#pendingsupport').on('click', function () { dataTables.columns(2).search("PENDING SUPPORT").draw(); }); $('#open').on('click', function () { dataTables.columns(2).search("OPEN").draw(); }); $('#closed').on('click', function () { dataTables.columns(2).search("CLOSED").draw(); });

`