jquey ui中datatbale处理请求后留在本页

最新推荐文章于 2020-05-26 13:48:22 发布
最新推荐文章于 2020-05-26 13:48:22 发布
阅读量924 收藏
点赞数
分类专栏： html jquery ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/unesco3187/article/details/52635847
版权

$("#example").dataTable().fnDraw(false);  此函数就是处理请求后,还维持在本页


下面是自己的jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<style type="text/css" title="currentStyle">
    @import "${ctx}/js/DataTables-1.8.0/media/css/demo_page.css";
    @import "${ctx}/js/DataTables-1.8.0/media/css/demo_table.css";
    @import "${ctx}/css/hyipmessage.css";
    @import "${ctx}/js/DataTables-1.8.0/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/js/jquery-validation-1.8.1/demo/css/screen.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/qbao.dialog.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/My97DatePicker/skin/WdatePicker.css" />

<script type="text/javascript" src="${ctx}/js/DataTables-1.8.0/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-ui-1.8.13/js/jquery.form.min.js"></script>
<script type="text/javascript" src="${ctx}/js/moment/moment.js"></script>
<script type="text/javascript" src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/js/hyip.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        createTable();
        $('#search').click(createTable);

        $('#reasonDialog').dialog({
            modal: true,
            position: 'center',
            autoOpen: false,
            width: 500,
            height: 350,
            buttons: {
                '确认': function () {
                    var idReason = $('#idReason').val();
                    var reason = $('#reason').val();
                    if (reason.length > 50) {
                        alert("原因不能大于50个字符");
                        return;
                    }
                    HYIP.ajax('${ctx}/checkManage/check.html', {
                        id: idReason,
                        checkStatus: 2,
                        reason: reason
                    }, function (data) {
                        $('#reasonDialog').dialog('close');
                        HYIP.showDynamicMsg('hyip_float_message', 'hyip-success', data.message);
                        $("#example").dataTable().fnDraw(false);
                    }, function (data) {
                        HYIP.showDynamicErrorMsg(data.message);
                    });

                }, '取消': function () {
                    $('#reason').val('');
                    $('#reasonDialog').dialog('close');
                }
            }
        });


        $('#exportDialog').dialog({
            modal: true,
            position: 'center',
            autoOpen: false,
            width: 500,
            height: 350,
            buttons: {
                '确认': function () {
                    //装载ajax参数
                    var shopId = $.trim($('#shopId').val());
                    var goodsId = $.trim($('#goodsId').val());
                    var applyId = $.trim($('#applyId').val());
                    var goodsName = $.trim($('#goodsName').val());
                    var checkStatus = $("#checkStatus").val();
                    var startTimeS = $.trim($('#startTimeS').val());
                    var startTimeE = $.trim($('#startTimeE').val());
                    var modelType =  $.trim($('#modelType').val());
                    var categoryNameA = $.trim($('#categoryNameA').val());



                    $('#shopIdExcel').val(shopId);
                    $('#goodsIdExcel').val(goodsId);
                    $('#applyIdExcel').val(applyId);
                    $('#goodsNameExcel').val(goodsName);
                    $('#checkStatusExcel').val(checkStatus);
                    $('#modelTypeExcel').val(modelType);
                    $('#categoryNameAExcel').val(categoryNameA);
                    $('#startTimeSExcel').val(startTimeS);
                    $('#startTimeEExcel').val(startTimeE);

                    $("#hiddenForm").submit();
                    $('#exportDialog').dialog('close');
                }, '取消': function () {
                    $('#exportDialog').dialog('close');
                }
            }
        });
    });

    function createTable() {
        $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
        $('#example').dataTable({
            'iDisplayLength': 15,
            'bSortClasses': false,
            'bSort': false,
            'sPaginationType': 'full_numbers',
            "sDom": '<"top"i>rtp<"clear">', //页面上元素位置
            'aoColumns': [
                {'sTitle': '申请ID', 'sClass': 'center', 'sWidth': '5%'},
                {'sTitle': '商家ID', 'sClass': 'center', 'sWidth': '5%'},
                {'sTitle': '商家名称', 'sClass': 'center', 'sWidth': '10%'},
                {'sTitle': '商品信息', 'sClass': 'center', 'sWidth': '15%'},
                {'sTitle': '商户类型', 'sClass': 'center', 'sWidth': '5%'},
                {'sTitle': '一级类目', 'sClass': 'center', 'sWidth': '5%'},
                {'sTitle': '拍卖类型', 'sClass': 'center', 'sWidth': '5%'},
                { 'sTitle': '申请时间', 'sClass': 'center', 'sWidth': '10%' },
                {'sTitle': '原价(钱宝币)', 'sClass': 'center', 'sWidth': '9%'},
                {'sTitle': '起拍价(钱宝币)', 'sClass': 'center', 'sWidth': '9%'},
                {'sTitle': '最低竞拍价(钱宝币)', 'sClass': 'center', 'sWidth': '9%'},
                {'sTitle': '可参与库存', 'sClass': 'center', 'sWidth': '10%'},
                // { 'sTitle': '场次', 'sClass': 'center', 'sWidth': '10%' },
                {'sTitle': '状态', 'sClass': 'center', 'sWidth': '9%'},
                {'sTitle': '操作', 'sClass': 'center', 'sWidth': '10%'}
            ],
            'oLanguage': {
                'sProcessing': '加载数据中...',
                'sInfo': '当前显示  _START_ 到  _END_ 条记录，总共  _TOTAL_ 条',
                'sInfoEmpty': '',
                'sZeroRecords': '暂无消息',
                'oPaginate': {'sFirst': '首页', 'sPrevious': '上一页', 'sNext': '下一页', 'sLast': '末页'},
                "sEmptyTable": "没有记录"
            },
            'bProcessing': true,
            'bServerSide': true,
            'sAjaxSource': '${ctx}/checkManage/listApplyRecords.html',
            'fnServerData': function (sSource, aoData, fnCallback) {
                //装载ajax参数
                var shopId = $.trim($('#shopId').val());
                if (shopId != null && shopId != '') {
                    aoData.push({name: 'shopId', value: shopId});
                }
                var categoryNameA = $.trim($('#categoryNameA').val());
                if (categoryNameA != '') {
                    aoData.push({name: 'categoryNameA', value: categoryNameA});
                }
                var applyId = $.trim($('#applyId').val());
                if (applyId != null && applyId != '') {
                    aoData.push({name: 'applyId', value: applyId});
                }
                var goodsId = $.trim($('#goodsId').val());
                if (goodsId != null && goodsId != '') {
                    aoData.push({name: 'goodsId', value: goodsId});
                }
                var goodsName = $.trim($('#goodsName').val());
                if (goodsName != null && goodsName != '') {
                    aoData.push({name: 'goodsName', value: goodsName});
                }
                var checkStatus = $("#checkStatus").val();
                if (checkStatus != null && checkStatus != '') {
                    aoData.push({name: 'checkStatus', value: checkStatus});
                }
                var startTimeS = $.trim($('#startTimeS').val());
                var startTimeE = $.trim($('#startTimeE').val());
                if (startTimeS != '') aoData.push({name: 'startTimeS', value: startTimeS});
                if (startTimeE != '') aoData.push({name: 'startTimeE', value: startTimeE});

                var modelType =  $.trim($('#modelType').val());
                if (modelType != '') {
                    aoData.push({name: 'modelType', value: modelType});
                }
                HYIP.ajax(sSource, aoData, function (resp) {
                    var result = resp.data;
                    var records = result.aaData;
                    var aaData = [];
                    var buttons = [];
                    var modelType ;
                    if (records != null) {
                        for (var i = 0; i < records.length; i++) {
                            var record = records[i];
                            buttons = [];
                            buttons.push('<input type="button" class="btn" style="cursor:pointer;" οnclick="showDetail(' + record.id + ');" value="查看" />');
                            if (record.checkStatus == 0) {
                                buttons.push('<input type="button" class="btn" style="cursor:pointer;" οnclick="pass(' + record.id + ');" value="通过" />');
                                buttons.push('<input type="button" class="btn" style="cursor:pointer;" οnclick="refuse(' + record.id + ');" value="不通过" />');
                            }
                            var checkStatus = record.checkStatus;
                            var checkStatusStr = '';
                            if (checkStatus == 0) {
                                checkStatusStr = '待审核';
                            } else if (checkStatus == 1) {
                                checkStatusStr = '审核通过';
                            } else if (checkStatus == 2) {
                                checkStatusStr = '审核未通过';
                            } else if (checkStatus == 3) {
                                checkStatusStr = '已发布';
                            }else if (checkStatus == 4) {
                                checkStatusStr = '已撤销';
                            }

                            var shopInfo = null;  // TODO
                            var operate = null;
                            var goodsInfo = record.goodsInfo;
                            var goodsInfoList = [];
                            if (goodsInfo == null || goodsInfo == '') {
                                goodsInfoList[0] = '';
                                goodsInfoList[1] = '';
                                goodsInfoList[2] = '';
                            } else {
                                goodsInfoList = goodsInfo.split(",");
                            }
                            if (record.type == 0) {
                                modelType = '下跌式';
                            } else if (record.type == 1) {
                                modelType = '加价式';
                            }else if (record.type == 2){
                                modelType = '幸运夺宝';
                            }else if (record.type == 3){
                                modelType = '限时抢';
                            }

                            if(record.applyTime != null && record.applyTime != ""){
                                applyTime = moment(record.applyTime).format("YYYY-MM-DD HH:mm:ss");
                            }

                            aaData.push([
                                record.id,
                                record.shopId,
                                record.shopName,
                                goodsInfoList[0] + '</br>商品ID:' + goodsInfoList[1] + '</br>' + goodsInfoList[2],
                                record.shopTypeName,
                                record.categoryNameA,
                                modelType,
                                applyTime,
                                record.normalPrice,
                                record.startPrice,
                                record.lowestPrice,
                                record.goodsNum,
                                // record.periodTimeStr,
                                checkStatusStr,
                                buttons.join(' ')
                            ]);
                        }
                    }
                    fnCallback({
                        'sEcho': result.sEcho,
                        'iTotalRecords': result.itotalRecords,
                        'iTotalDisplayRecords': result.itotalDisplayRecords,
                        'aaData': aaData
                    });
                });
            }
        });
    }
    function pass(id) {
        HYIP.ajax('${ctx}/checkManage/check.html', {id: id, checkStatus: 1}, function (data) {
            HYIP.showDynamicMsg('hyip_float_message', 'hyip-success', data.message);
//            createTable();
            $("#example").dataTable().fnDraw(false);
        }, function (data) {
            HYIP.showDynamicErrorMsg(data.message);
        });
    }
    function refuse(id) {
        $('#idReason').val(id);
        $('#reasonDialog').dialog('open');
    }
    function trimText(obj) {
        $(obj).val($.trim($(obj).val()));
    }
    function showDetail(id) {
        window.location.href = '${ctx}/checkManage/toShowDetail.html?id=' + id;
    }
    function exportExcel(){
        $('#exportDialog').dialog('open');
    }
</script>

<div id="page_content" class="content">
    <div class="span_title">审核管理</div>
    <div class="selectBox">
        申请ID：<input type="text" name="applyId" id="applyId" οnblur="trimText(this);" />   
        商家ID：<input type="text" name="shopId" id="shopId" οnblur="trimText(this);" />   
        商品ID：<input type="text" name="goodsId" id="goodsId" οnblur="trimText(this);" />   
        商品名称：<input type="text" name="goodsName" id="goodsName" οnblur="trimText(this);" />   
        <div class="div_blank"> </div>
        <%--商户类型：--%>
        <%--<select id="type">--%>
            <%--<option value="-1">全部</option>--%>
            <%--<option value="0">认证商家（付费）</option>--%>
            <%--<option value="1">认证商家（达标）</option>--%>
            <%--<option value="2">企业商家</option>--%>
        <%--</select>--%>
        一级类目：
        <select id="categoryNameA" name="categoryNameA">
            <option value="-99">全部</option>
            <c:if test="${not empty categoryNameList}">
                <c:forEach items="${categoryNameList}" var="categoryNameList" varStatus="idx">
                    <li <c:if test="${idx.index > 0 }">style="display: none;"</c:if>>
                        <option value=${categoryNameList.categoryNameA}>${categoryNameList.categoryNameA}</option>
                    </li>
                </c:forEach>
            </c:if>
        </select>   
        拍卖类型：<select id="modelType" name="modelType">
        <option value="99">全部</option>
        <option value="0">下跌式</option>
        <option value="1">加价式</option>
        <option value="2">幸运夺宝</option>
        <option value="3">限时抢</option>
    </select>   
        申请时间：<input type="text" name="startTimeS" id="startTimeS" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> 至
        <input type="text" name="startTimeE" id="startTimeE" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />   
        审核状态：
        <select id="checkStatus">
            <option value="-1">全部</option>
            <option value="0" selected="selected">待审核</option>
            <option value="1">审核通过</option>
            <option value="2">审核未通过</option>
            <option value="4">已撤销</option>
        </select>
        <input type="button" value="查询" id="search" class="btn" style="cursor:pointer;" />
        <input type="button" value="导出" id="exportExcel" class="btn" style="cursor:pointer;"  οnclick="exportExcel()"/>
    </div>
    <div id="demo"></div>
    <div id="reasonDialog" title="不通过原因" style="display: none">
        <p><input id="idReason" type="hidden" />
            原因：
            <textarea id="reason" rows="3" cols="30"></textarea>
        </p>
    </div>

    <div id="exportDialog" title="导出确认" style="display: none">
        <p><input id="isExcelExport" type="hidden" />
            确定要导出该数据吗？
        </p>
    </div>

    <form id="hiddenForm" action="/checkManage/listCheckExport.html" method="post">
        <input  type="hidden" id="shopIdExcel" name="shopIdExcel" value="">
        <input  type="hidden" id="applyIdExcel" name="applyIdExcel" value="">
        <input  type="hidden" id="goodsIdExcel" name="goodsIdExcel" value="">
        <input  type="hidden" id="goodsNameExcel" name="goodsNameExcel" value="">
        <input  type="hidden" id="checkStatusExcel" name="checkStatusExcel" value="">
        <input  type="hidden" id="modelTypeExcel" name="modelTypeExcel" value="">
        <input  type="hidden" id="categoryNameAExcel" name="categoryNameAExcel" value="">
        <input  type="hidden" id="startTimeSExcel" name="startTimeSExcel" value="">
        <input  type="hidden" id="startTimeEExcel" name="startTimeEExcel" value="">
    </form>

</div>


我是梅先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery Datatables editor进行增删改查操作(一)
机械键盘侠博客
09-08 4318
背景 editor作为Datatables的插件之一，功能十分强大，有全行编辑模式、泡泡编辑模式、行内编辑模式。个人觉得，除了泡泡编辑模式外，其他两种模式功能在实际项目中会经常使用到，泡泡模式提供了模态框可以对表格内的数据进行增改删功能，而行内编辑功能更是在一些单据编辑功能中是必不可少的。网上对editor插件使用描述的文章太少，可能由于editor插件是付费的缘故吧，很多文章描述十分简单，或代...
Jquery dataTable完整例子（取数据、分页、样式等）
09-21
分页、排序、检索 Datatable与json之间数据转换，一个详细完整的例子！，希望对大家有用。
jQueryUI参考手册中文CHM版
07-22
资源名称：jQuery UI参考手册 中文CHM版内容简介：jQuery UI是一个建立在jQuery Javaｓｃｒｉｐｔ 库上的小部件和交互库，您可以使用它创建高度交互的Web应用程序。本教程将向您讲解 jQuery UI 是如何工作的。本文给大家带来jQuery UI参考手册，需要的朋友们可以下载看看jQuery UI 特性简单易用继承 jQuery 简易使用特性，提供高度抽象接口，短期改善 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
datatable在分页的情况下，实现刷新后不跳转到第一页
菜鸟日记
04-25 2273
假如是在第三页点击某个操作，比如说编辑，跳转到编辑页面，编辑完保存后，又跳转至第三页并且刚刚修改的数据刷新了，这种情况就别看了，我也没找到解决办法。 如果是在本页面通过模态框，弹出框的方式修改数据，则可以使用oTable.draw(false); 比如通过复选框多选之后，通过弹出框进行指派，ajax执行成功之后，写上一句oTable.draw(false);就可以实现在当前页刷新数据 ...
dataTables系列之-.fnDraw(boolean)重绘方法失效问题
热门推荐
weinichendian的博客
08-06 1万+
解决方案： 首先，检查datatables的路径"sAjaxSource"是否正确。 其次，检查配置使用服务器端处理"bServerSide" : true是否设置为true了 最后，调用刷新方法contentTables.dataTable().fnDraw(false); 解释：$("#").dataTable().fnDraw(boolean);重绘方法。 ...
JQuery.datatables只刷当前页面表格数据，保留分页页码
知行合一
08-21 1802
JQuery.datatable无刷新多种初始化表格的使用方式。 ajax.reload( callback, resetPaging ) 里面有二个参数： callback ：当服务器返回数据并重绘完毕时执行此回调方法，回调方法返回的是服务器返回的数据 resetPaging： 重置（默认或者设置为true）或者保持分页信息（设置为false） var table = $('#example')...
jquery.Datatables页面刷新
u012512634的专栏
08-10 6377
jquery.Datatables页面刷新 jquery.Datatables页面刷新 1.执行操作后刷新表格，停留在当前页面 1.1 场景 1.2 解决方法 1.3 参考文档 2.状态保存 2.1 场景 2.2 解决方法 2.3 参考文档 3.不需要保存状态的页面跳转 3.1 场景 3.2 解决方法 3.3 参考文档 1.执行操作后刷新表格，停留在当前页面...
jquery.dataTable自动刷新，不跳到第一页的方法
郦强 的专栏
10-12 1万+
jquery.dataTable，在删除非第一页的数据后要刷新数据却会导致回到了第一页。 解决办法： 例如你的table id 为dataTable，那么使用下面的方法即可： $("#dataTable").dataTable().fnDraw(false); 之所以加参数false是，因为默认情况下fnDraw()是针对整个JqueryDataTable，而加了之后就是针对操作时Tabl
【DataTable】关于实现DataTable后端分页过程中的一些问题总结
CHENXY
06-21 7967
一、场景    公司新开发的一个web项目，项目中一个功能是从失败交易流水表中按日期查询失败的交易，以列表的形式展示出来。前端列表使用了DataTable，DataTable自带前端分页和后端分页。所谓前端分页就是一次性从数据库中查出所有数据返回给前端，前端自动进行分页。这种处理方式在数据量较小的情况下还可以，当数据量较大（具体数据量没有测试）会导致前端加载数据缓慢卡顿，同时因为后端一次性从数据库...
jquery datatable ajax配置详解
hellojoy的博客
05-26 1038
https://www.cnblogs.com/keyi/p/6733738.html 我写的这个东西类似于个人笔记，如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("selector").dataTable( "processing" : true,//显示“处理中...” "serverSide" : true,//开启服务器模式。 "data":[.......
DataTable的Ajax使用
hellojoy的博客
05-26 4348
https://www.cnblogs.com/bkyxnc/p/9214147.html DataTable Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 官网:https://datatables.net/ 中文网:http://www.datatables.club/ 用法： 先从最简单的开始：导入导入dataTable需要的js与css - css http://cdn.datatables.net/1.10...
jquey-validation
11-12
jquery表单验证插件，从网上好不容易找到的，自己在实际项目中用过了，很简单，但是很实用
jquery datatable 大数据分页面的解决方案
09-04
jquery datatable 大数据分页面的解决方案
jquery.dataTable.js
07-25
jquery.dataTable.js资源下载,基于jquery的前端表格插件,表格插件下载,datatable下载
使用JSP+jqueryUI+java Servlet通过Apache POI实现Excel导入导出
08-19
使用JSP+jqueryUI+java Servlet通过Apache POI实现Excel导入导出
在Vue项目中引入JQuery-ui插件的讲解
10-17
今天小编就为大家分享一篇关于在Vue项目中引入JQuery-ui插件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
JQuery1.7中文手册及JQueryUI英文APICHM版
07-22
资源名称：JQuery 1.7中文手册及JQuery UI 英文API CHM版内容简介：JQuery1.7的手册找了很多次了，都TM是要注册，回复，扣积分下载的。...资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jquery.ui使用手册中文PDF版
07-22
jquery.ui虽然在功能上距离extjs的ui还有段差距，但却不得不看好jquery的发展前景。 jquery近期和extjs合作了，希望强大的extjs ui能够被发挥在性能强劲的jquery框架里。希望本文档会给有需要的朋友带来帮助；感兴趣...
设置jQueryUI DatePicker默认语言为中文
10-22
本文主要介绍jQueryUI DatePicker设置中文的方法，需要的朋友可以参考下。
jquery 在跳转页面时如何取消所有正在进行中的请求
最新发布
05-30
在 jQuery 中，可以使用 `$.ajax()` 方法来发送异步请求。如果想要取消所有正在进行中的请求，可以使用 `$.ajax()` 方法返回的对象的 `abort()` 方法。 具体来说，可以在发送请求时将返回的对象存储在一个数组中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值