Data table rendering filters and footer toals

nathanseo

Hello, I'm new here and could really do with support with rendering additional options to my Table.

I want to be able to filter results by date and count up totals of a cell range where possible.

To initialise my table I parse a url, the data looks like this:

{
    "draw": 0,
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "customer_id": "2",
            "firstname": "Protyush",
            "lastname": "Sinha",
            "grand_total": "356.9500",
            "deposit_amount": "0.0000",
            "order_ref_id": "200000013",
            "retailer_id": "2",
            "amount_owed": "356.9500",
            "order_date": "24/09/2015",
            "store_name": "test"
        },
        {
            "customer_id": "3",
            "firstname": "ramki",
            "lastname": "R",
            "grand_total": "569.9000",
            "deposit_amount": "66.0000",
            "order_ref_id": "200000005",
            "retailer_id": "2",
            "amount_owed": "474.9167",
            "order_date": "23/09/2015",
            "store_name": "test"
        },
        ]
}

The code i use to initialise the table looks like this:

<script type="text/javascript">
        $(document).ready(function () {

            var oTable = $('#example').dataTable({
                "bProcessing": true,
                //"bServerSide": true,
                "sAjaxSource": '<?php echo base_url(); ?>/index.php/customer/dataTable/',
                "sAjaxDataProp": "data",
                //"bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "oLanguage": {
                    "sProcessing": "<?php echo base_url(); ?>/index.php/assets/images/loading.gif'>"
                },
                "fnInitComplete": function () {
                    //oTable.fnAdjustColumnSizing();
                },
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax
                    ({
                        'dataType': 'json',
                        'type': 'POST',
                        'url': sSource,
                        'data': aoData,
                        'success': fnCallback
                    });
                },

"fnFooterCallback": function (nRow, aoData, iStart, iEnd, aiDisplay) {
                 var total = 0;
                        for (var i = 0; i < aoData.length; i++) {
                            total += aoData[i][3] * 1;
                        }

                        var page = 0;
                        for (var i = 0; i < aoData.length; i++) {
                            page += aoData[aiDisplay[i]][3] * 1;
                        }

                        /* Modify the footer row to match what we want */
                        var nCells = nRow.getElementsByTagName('th');
                        nCells[3].innerHTML = parseInt(page);
        },



                "aoColumns": [
                        //{ "mData": "customer_id" },
                        { "mDataProp": "order_date", "type":"date-range" },
                        { "mDataProp": "order_ref_id" },
                        { "mDataProp": "customer_id" },
                        //{ "mDataProp": "lastname" },
                        { "mDataProp": "grand_total" },
                        { "mDataProp": "deposit_amount" },
                        //{ "mDataProp": "retailer_id" },
                        { "mDataProp": "amount_owed" },
                        { "mDataProp": "store_name" }
                    ],
            });

        /* Add event listeners to the two range filtering inputs */
        //$('#min, #max').keyup( function() {
        //    table.draw();
        //} );
    });   
</script>

I've tried a few methods looking over the internet but really need some expert advice, also if this is something someone would like to fix a small project just drop me a message.

tangerine

Please use Markdown to format your code, as requested on the "new post" page.

nathanseo

Thanks tangerine, can read it now

ThomD

This shows how to sum the values in a column

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

There is a plug in for search dates, called "yet another datatables column filter" I don't use it, but you can google details.

nathanseo

Thanks!