how to change the default number of records to display and instead of number use a head column field

gnux8

Good Afternoon,
reading this:

https://datatables.net/forums/discussion/162/how-to-change-the-default-number-of-records-to-display

I would like to know if is possible instead of number use a column field for example using this:

https://datatables.net/examples/basic_init/language.html

I would like to have "OFFICE" as select input and have a modified table with all the record that are matching the office field.

Best Regards,
Andrea

colin

Hi @gnux8 ,

You would be able to use the page length control, as it's not intended for that purpose - but you could add your own control that filters the table on the string in the menu.

Cheers,

Colin

colin

Note, thread duplicated, see here https://datatables.net/forums/discussion/55586/how-to-change-the-default-number-of-records-to-display-and-instead-of-number-use-a-head-column-field#latest . Please raise just once.

tangerine

Correction to Colin's post:
"You would NOT be able to use the page length control...."

colin

pffft what's a missing word here or there

gnux8

Thank you, i will try to have a look the post sent and i'll come back in case of need thank you

gnux8

Yes, we have right I've duplicated but i didn't found a way to delete one, for left only one post ...

gnux8

Could you kindly tell me how I can make a custom filter for a table ? sorry but i didn't know from where start. Thanks you

colin

This dropdown here determines which column the search box will affect. You could have a similar dropdown that onchange would initiate a search.

gnux8

Looking your example I've understood that with "Search Column" your and selecting which field do you want search for example "Position" and then in "Search" put the term of the research for example "System" .

what i would like to obtain is:

• "Search Column" : have all the Position available: System Architect,Technical Author,Software Engineer,Integration Specialist etc ...

and when is selected filter the table,

is possible that ?

Br
Andrea

kthorngren

Maybe you can adapt this example to fit your needs.
https://datatables.net/examples/api/multi_filter_select.html

Kevin

gnux8

I think is too difficult to do :-(

gnux8

Good Morning, I've well implemented the filter :-) thansk for the support ... now i would like to add a sum into the footer ...

https://datatables.net/examples/advanced_init/footer_callback.html

How i can mix the features ?

i think that the problem is related how to implement the js

so actually i have this in my js

$(document).ready(function() {
    $('#dataTable').DataTable( {
        retrieve: true,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
        
    } );
} );

and i would add also this:

$(document).ready(function() {
    $('#example').DataTable( {
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
} );

How i can combine in only one ?

Thanks
Andrea

EDIT: Updated to use Markdown Code formatting

kthorngren

You simply move the footerCallback into the first Datatable initialization. Datatables expects all the options to be in one initialization call. Just make sure you have a comma separating the options otherwise you will get a syntax errror.

Kevin

gnux8

do you mean add a comma at the end the first initialization and the second code ? could you kindly past the example ? thanks :-)

kthorngren

Something like this:

$(document).ready(function() {
    $('#dataTable').DataTable( {
        retrieve: true,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },   // comma here to separate the options
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
  
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
  
            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
  
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
  
            // Update footer
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }         
    } );
} );

Kevin

gnux8

Thanks it works that means that if you want then add another function just do like the example that you did it :-) i would add also this example :-)

https://datatables.net/extensions/buttons/examples/initialisation/export.html

Thanks 1000000
Andrea

kthorngren

Yes, they all go into one Datatables initialization

Kevin

gnux8

Thanks, the part related the js it's ok the point is that im not able to extract the part realted to html in the sense that im not able to find the button definition

could you kindly help ?

thanks :-)110000101010101010101

kthorngren

not able to find the button definition

Not sure what that means. Without seeing what you are doing and knowing excatly what is happening its hard to help. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

gnux8

Ok, I've the button on the page and loaded all the module listed into the example ... but no action behind the press button where i can investigate ? thanks Andrea

gnux8

in attachement the file

kthorngren

Looks like you are loading jQuery.js and Datatables.js twice; once at the top and once at the bottom. They should only be loaded once.

I don't see where you are loading the CSS files for the buttons.

My suggestion would be to build a simple test case using one of the options I linked to above. Start simple with a basic Bootstrap based Datatable then add buttons and other features. This will make it easier to help you.

Kevin

gnux8

Thanks you most probably I've forget the css ... I've downloaded but not reference ... i'll double check and i'll let you know :-) thanks you

gnux8

im trying as you suggested also i've download entire example ...

gnux8

Ciao in attachment I've modified the tables.html and you can find the datables ... Now the stilesheet has been apllied to the button but still to have no action ... maybe could be the datatables-demo.js the issues ?

kthorngren

You are still loading jquery.js and datatables.js twice. You have them loading at the top of the tables.html and at the bottom.

Kevin

gnux8

I've created a simple example also !

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<script type="text/javascript" src="/MultiFilter/site.js"></script>
<script type="text/javascript" src="/MultiFilter/dynamic.php?" async></script>
<script type="text/javascript" language="javascript" src="MultiFilter/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="MultiFilter/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="MultiFilter/demo.js"></script>

<link rel="stylesheet" type="text/css" href="Export/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="/Export/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="/Export/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="/Export/demo.js"></script>
<script type="text/javascript" class="init">

$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
} );

} );

</script>

</head>
<body>
    <table id="example" class="display" style="width:100%">
        <div class="dt-buttons">          
                <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="dataTable" type="button">
                <span>Copy</span>
                </button>  
                <button class="dt-button buttons-excel buttons-html5" tabindex="0" aria-controls="dataTable" type="button">
                <span>Excel</span>
                </button> 
                <button class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="dataTable" type="button">
                <span>PDF</span>
                </button> 
                <button class="dt-button buttons-print" tabindex="0" aria-controls="dataTable" type="button">
                <span>Print</span>
                </button> 
          </div>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>

        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
</body>

</html>

kthorngren

Ok, I've the button on the page and loaded all the module listed into the example ... but no action behind the press button where i can investigate ?

Is this still the problem?

You have this div created:

<div class="dt-buttons"> 
....
</div>

I suspect these are the buttons you are referring to. You don't need to create this. Datatables will do it for you with the B parameter in dom: 'Bfrtip',. If its not creating the buttons for you then there is still a problem. At this point it would be hard to help debug without actually seeing it. Can you post a link to your page or a test case so we can help?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Take a look at the browser's console for errors.

Kevin

gnux8

Sorry I was testing the test locally what a stupid guys without loading the file on server :-) it's friday ... now the test example is working i will try to be focus on the others... i'll come back soon thnk

gnux8

Ok, with your advise I've fixed :-) the errrors were related to double entry of datables and also I've the button after the table in order to have displayed only one times ... instead twice :-) thanks again for your useful advise :-)