dataTable 加载展示 以及刷新数据
来源：互联网 发布：淘宝店铺海报尺寸 编辑：程序博客网 时间：2024/06/06 21:39
使用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="#">← ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' → </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_ 条 共 _TOTAL_ 条 ", "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 redayfunction 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 --> 0 0
- dataTable 加载展示 以及刷新数据
- 展示数据,上拉加载,下拉刷新,一定要导入library.
- dataTable定时刷新数据
- highchart的数据加载以及实时刷新
- XListView 展示刷新与加载
- bootstrap datatable 数据刷新问题
- Xlistview上拉加载，下拉刷新、多条目展示以及获取系统时间
- Juery DataTable加载后台数据
- RecyclerView加载数据进行展示
- rerecyclerview刷新加载数据
- MVP框架+RXJava+reftorfit请求网络数据+XRecycleView多条目展示（banner轮播+条目展示、刷新加载）、点击事件+fresco图片加载
- recycleview加载数据实现数据刷新上拉下拉 Demo 用到retrofit 和mvp模式 图片展示
- bootstrap加载model以及dataTable按钮操作
- 关于Jquery datatable动态加载数据心得
- DataTable数据加载不成功，而且不报错
- jquery dataTable 后台加载数据并分页
- C#.NET MVC datatable 插件加载数据
- listView下拉刷新加载数据
- ExtJs树展开到指定节点
- Flask中session的用法
- jeecms修改端口号
- OpenStack设置创建实例超过253
- js异常:Unexpected identifier
- dataTable 加载展示 以及刷新数据
- ios ASIFormDataRequest上传图片到php服务器
- 统计量
- [案例分享] 茂迪公司一次打造跨平台 App 实时掌握生产线信息
- IOS版添加phonegap--插件写法教程
- 【年度案例】小米抢购限流峰值系统「大秒」架构解密
- mysql常用管理操作
- mysql 创建一个用户，指定一个数据库
- php格式化金额函数分享
