jQuery DataTables display All Records as an option

Question

I'm using a purchased Admin theme for a web app that I'm building. That theme came with styles for jQuery dataTables. I'm trying to figure out how to add a View All Records option to the records per page drop down but because the theme came prestyled there is a lot of code already written and and I don't know how to add what I need to. Here is what I have:

Footer Code:

    <!-- jQuery DataTable -->
    <script src="<?php echo base_url(); ?>assets/js/plugins/dataTables/jquery.datatables.min.js"></script>
    <script>
        /* Default class modification */
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

        /* API method to get paging information */
        $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        {
            return {
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            };
        }

        /* Bootstrap style pagination control */
        $.extend( $.fn.dataTableExt.oPagination, {
            "bootstrap": {
                "fnInit": function( oSettings, nPaging, fnDraw ) {
                    var oLang = oSettings.oLanguage.oPaginate;
                    var fnClickHandler = function ( e ) {
                        e.preventDefault();
                        if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                            fnDraw( oSettings );
                        }
                    };

                    $(nPaging).addClass('pagination').append(
                        '<ul>'+
                            '<li class="prev btn-small disabled"><a href="#"><span class="awe-caret-left"></span> '+oLang.sPrevious+'</a></li>'+
                            '<li class="next btn-small disabled"><a href="#">'+oLang.sNext+' <span class="awe-caret-right"></span></a></li>'+
                        '</ul>'
                    );
                    var els = $('a', nPaging);
                    $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                    $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
                },

                "fnUpdate": function ( oSettings, fnDraw ) {
                    var iListLength = 0;
                    var oPaging = oSettings.oInstance.fnPagingInfo();
                    var an = oSettings.aanFeatures.p;
                    var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

                    if ( oPaging.iTotalPages < iListLength) {
                        iStart = 1;
                        iEnd = oPaging.iTotalPages;
                    }
                    else if ( oPaging.iPage <= iHalf ) {
                        iStart = 1;
                        iEnd = iListLength;
                    } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                        iStart = oPaging.iTotalPages - iListLength + 1;
                        iEnd = oPaging.iTotalPages;
                    } else {
                        iStart = oPaging.iPage - iHalf + 1;
                        iEnd = iStart + iListLength - 1;
                    }

                    for ( i=0, iLen=an.length ; i<iLen ; i++ ) {

                        // Add / remove disabled classes from the static elements
                        if ( oPaging.iPage === 0 ) {
                            $('li:first', an[i]).addClass('disabled');
                        } else {
                            $('li:first', an[i]).removeClass('disabled');
                        }

                        if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                            $('li:last', an[i]).addClass('disabled');
                        } else {
                            $('li:last', an[i]).removeClass('disabled');
                        }
                    }
                }
            }
        });

    </script>

What I want To Add (I Think, based off of another Stack Overflow question):

oTable = $('#example').dataTable({ "aLengthMenu": [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "All"]
    ], 


"iDisplayLength" : -1 });

I was able to go into the actual dataTables.js file and make the change though that is obviously not the ideal way to go since I'd lose my change upon upgrading the script. — Rich Coy
– Rich Coy, Commented Nov 21, 2012 at 20:46

Gyrocode.com · Accepted Answer · 2015-12-11 16:51:06Z

5

Since your oTable is your dataTable instance, try:

var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 500;
oTable.fnDraw();

You can put this in an onClick too:

var oSettings = oTable.fnSettings();

$('.changeLength').click(function(e){
   oSettings._iDisplayLength = 500;
   oTable.fnDraw(); 
});

That way when you click the button it changes the table length.

edited Dec 11, 2015 at 16:51

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

answered May 23, 2013 at 16:08

Mike Mackintosh

14.3k7 gold badges64 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery DataTables display All Records as an option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related