dataTable 加載展示 以及刷新數據

使用dataTables展示數據，需求需要添加日期選擇和分類篩選。表格footer顯示統計數據。差額數據直接在列表中隱藏，獲取

var table;
var total;
$(function() {
     //-----  money page or Tables page -----//
    if ($('#money_page, #tables_page').length > 0) {

        /* Set the defaults for DataTables initialisation */
        $.extend(true, $.fn.dataTable.defaults, {
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            }
        });

        /* 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 disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </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 = 5;
                    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++) {
                        // Remove the middle elements
                        $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                        // Add the new list items and their event handlers
                        for (j = iStart; j <= iEnd; j++) {
                            sClass = (j == oPaging.iPage + 1) ? 'class="active"': '';
                            $('<li ' + sClass + '><a href="#">' + j + '</a></li>').insertBefore($('li:last', an[i])[0]).bind('click',
                            function(e) {
                                e.preventDefault();
                                oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                                fnDraw(oSettings);
                            });
                        }

                        // 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');
                        }
                    }
                }
            }
        });

        /*
        * TableTools Bootstrap compatibility
        * Required TableTools 2.1+
        */
        if ($.fn.DataTable.TableTools) {
            // Set the classes that TableTools uses to something suitable for Bootstrap
            $.extend(true, $.fn.DataTable.TableTools.classes, {
                "container": "DTTT btn-group",
                "buttons": {
                    "normal": "btn",
                    "disabled": "disabled"
                },
                "collection": {
                    "container": "DTTT_dropdown dropdown-menu",
                    "buttons": {
                        "normal": "",
                        "disabled": "disabled"
                    }
                },
                "print": {
                    "info": "DTTT_print_info modal"
                },
                "select": {
                    "row": "active"
                }
            });

            // Have the collection use a bootstrap compatible dropdown
            $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
                "collection": {
                    "container": "ul",
                    "button": "li",
                    "liner": "a"
                }
            });
            $.fn.dataTable.Api.register( 'column().data().sum()', function () {
                return this.reduce( function (a, b) {
                    var x = parseFloat( a ) || 0;
                    var y = parseFloat( b ) || 0;
                    return x + y;
                } );
            } );
        }

        table=$('#money').DataTable({
            ajax:{
                "url":"/moneys",
                "data":{
                    shopid: function () { return $("#shopid").val(); },
                    starttime: function () { return $("#starttime").val(); },
                    endtime: function () { return $("#endtime").val(); }
                }},
            "columns": [
                     { "data": "storename" },
                     { "data": "username" },
                     { "data": "czje" },
                     { "data": "czfs" },
                     { "data": "czns" },
                     { "data": "czrq" },
                     { "data": "heji" ,"visible": false}
                 ],
            "aaSorting": [[ 0, "desc" ]],
            "sDom": "<'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {//下面是一些漢語翻譯
                "sSearch": "搜索",
                "sLengthMenu": "每頁顯示 _MENU_",
                "sZeroRecords": "沒有檢索到數據",
                "sInfo": "顯示 _START_ 至 _END_ 條 &nbsp;&nbsp;共 _TOTAL_ 條 &nbsp;&nbsp;",
                "sInfoFiltered": "(篩選自 _MAX_ 條數據)",
                "sInfoEmtpy": "沒有數據",
                "sProcessing": "<img src='/public/images/loading.gif' /> 數據加載中...", 
                "oPaginate":
                            {
                                "sFirst": "首頁",
                                "sPrevious": "前一頁",
                                "sNext": "後一頁",
                                "sLast": "末頁"
                            }
            },
                "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( 2 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );
                    cha=api.column(6).data()[0];
                    if (!cha) {
                        cha=0;
                    }
                    // Update footer
                    $( api.column( 2 ).footer() ).html(
                        '合計金額：' + total 
                    );
                    $( api.column( 5 ).footer() ).html(
                            '合計差額：' + cha 
                    );
                }
          });
    }
}); // end document reday

function showMoney(){
    table.ajax.reload();
}

    <div class="row-fluid">
        <div class="widget widget-padding span12">
            <div class="widget-header">
                <i class="icon-table"></i>
                <h5>xxxx</h5>
                <div class="widget-buttons">
                    <input type="hidden" value="${heji}" id="heji">
                    開始時間：<input  data-role="none" style="width: 15%;z-index: 10100" class="Wdate" id="starttime" type="text" onClick="WdatePicker()" >
                    結束時間：<input data-role="none" style="width: 15%" class="Wdate" id="endtime" type="text" onClick="WdatePicker()">
                    xxx
                        <select  id="shopid">
                        <option value="-1">全部</option>
                            #{list shopList, as : 'shop'}
                                <option value="${shop.id}">${shop.Shopname}</option>
                            #{/list}
                        </select>
                        <button class="btn btn-primary" onclick="showMoney()">查詢</button>
                </div>
            </div>
            <div class="widget-body">
                <table id="money" class="table table-striped table-bordered dataTable" >
                    <thead>
                        <tr>
                            <th>x</th>
                            <th>x</th>
                            <th>x</th>
                            <th>x</th>
                            <th>x</th>
                            <th>x</th>
                            <th>x</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                     <tfoot>
                        <tr>
                            <th colspan="3" style="text-align:right"></th>
                            <th colspan="3" style="text-align:left"></th>
                        </tr>
                    </tfoot>

                </table>
            </div>
            <!-- /widget-body -->
        </div>
        <!-- /widget -->
    </div>
    <!-- /row-fluid -->