ajax获取数据更新table以后,jquery.datatable的js效果失效了该怎么办呀QAQ?

用了jquery的模板表格,如果table里面放的是静态数据的话,选择展示多少条数据、搜索表格内容的功能都是正常的。
但用ajax从后台获取实际上的数据,append到tbody里面这样的形式后,就发现上面这些功能都失效了。

菜鸡学艺不精,网上的方法都试过了,都不行。
感觉好像是同步异步的问题,但不知道该怎么解决,求大佬指路QAQ。

这个是html:

<div class="table-responsive">
    <table id="dataTable1" width="100%" class="table table-striped table-lightfont" style="font-size: 15pt">
        <thead >

        <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                <th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
            <!-- ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 -->
        </thead>
        <tfoot>

            <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                </th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
        </tfoot>
        <tbody  id="searchBody">

        </tbody>
        </table>
</div>

这个是js:

function search() {
    //alert($("#station").val())

    var station = $("#station").val()
    var start_time = $("#start_time").val()
    //alert(start_time.toUpperCase)
    var end_time = $("#end_time").val()
    var start_hour = $("#start_hour").val()
    alert(start_time.toUpperCase)
    var end_hour = $("#end_hour").val()
    var level = $("#selectLevel").val()

    var flag = false;    //标识,表示页面上数据还未处理完成
    $.ajax({
        type : "get",
        url : "observe/search",
        data : $("#searchForm").serialize(),
        success : function(data) {
            /*table = $('#dataTable1').DataTable( {
                    retrieve: true,
                    destroy:true,
                    paging: false
            } );*/

            //alert("sucess!")
            //var length=getJsonLength(data);
            console.log(data)
            var arrData = eval(data);

            //alert(data[0].sampdate)
            var searchBody = $("#searchBody");
            $("#searchBody").html("");
            //var dataTable1 = $("dataTable1");
            //$("#dataTable1").html("");

            //var bodyInfo="";
            //var tableInfo="";

            if (data) {
                for (var i = 0; i < arrData.length; i++) {
                    //ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 
                    var row = “【不重要,略过】";
                    searchBody.append(row);
                    //bodyInfo+=row;
                }
                flag=true;

            }

            else {
                alert("数据库故障或无数据!");
            }
        }
    });

    var loadFile;
    loadFile = setInterval(function() {//定时检测    
        if(flag) {//如果数据已经处理完毕
            //loadAlljscssFile();
            loadjscssfile('static/js/jquery-3.2.1.min.js', "js"); //加载你的js文件
                loadjscssfile('static/bootstrap-3.3.7/css/bootstrap.min.css', "css"); //加载你的css文件
                loadjscssfile('static/bootstrap-3.3.7/js/bootstrap.min.js', "js"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css', "css"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net/js/jquery.dataTables.min.js', "js"); //加载你的js文件

                clearTimeout();//取消定时检测节省开销
                }
        },50);

}

1个回答

首先,DataTables.js 插件本身是可以接收 ajax 请求的:

return $("#"+tableId).DataTable({
        "dom": 'lrtip',
        "searching": false,
        "processing": true,
        "serverSide":true,
        "sAjaxSource": ajaxRequestUrl,
        "columns":columns,
        "ordering":false,
        "bDestroy":true,
        "language": {
            "sProcessing":"加载中...",
            "lengthMenu": "每页显示 _MENU_ 项记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _START_ 到 _END_ 项记录 (共 _TOTAL_ 项记录)",
            "infoEmpty": "没有记录",
            "sInfoFiltered": "(全部记录数 _MAX_ 条)",
            "paginate": {
                "first":      "第一页",
                "last":       "最末页",
                "next":       "下一页",
                "previous":   "上一页"
            }
        }
    });

用这种方式直接对列表通过 ajax 请求数据初始化即可。
其次,如果需要执行页面刷新请求,或者按钮搜索,可以再调用一次该方法,重新渲染列表。ajaxRequestUrl 和 columns 是 参数。

wojiushiwo945you
毕小宝 回复Belinda_YZ: ajaxRequestUrl, 这个直接通过URL 方式自动请求数据的。
5 个月之前 回复
qq_38427979
Belinda_YZ 请问向后台传入的数据放在哪个参数里面呢?
5 个月之前 回复
caozhy
每个人都有一个梦才不会孤单的说话就有天堂 正解,如果满意请点采纳,谢谢
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jquery datatable 刷新问题
``` 最近项目使用datatable,但是刷新遇到了问题,试过fnDraw等函数没有反应,datatable官方api是用ajxa.reload,但是会报没有定义ajax。 还有这个api解释中: var table = $('#example').DataTable( { ajax: "data.json" } ); setInterval( function () { table.ajax.reload(); }, 30000 ); data.json我不太明白是哪个数据,是重新刷新要赋给的数据?,那要怎么传进去呢 下面贴一下我的代码: jQuery.ajaxSetup({ headers: { Authorization: 'MDphZG1pbg=='} }); jQuery(function($) { oTable1 = $('#sample-table-2').DataTable( { /*"columnDefs": [{ "defaultContent": "-", "targets": "_all" }],*/ "sAjaxDataProp":"data", ajax: aa, /*"sPaginationType": "full_numbers",*/ /*"sAjaxSource":"http://123.56.93.33:8088/kiunion-data-provider/ws/users/1",*/ "sAjaxSource":"http://123.56.93.33:8088/kiunionSer/ws/v1.0/vehicleBaseInfo/searchByEnterprise?enterpriseId=1", "bProcessing" : true, "bServerSide": true, "bAutoWidth":true, "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": 'json', "type": "GET", "url": sSource, "data": aoData, "success":fnCallback, } ); "aoColumns": [ { mData: 'VehicleID' }, { mData: 'VehicleID' }, { mData: 'StatusID' }, { mData: 'PlateNumber' }, { mData: 'SeqNumber' }, { mData: 'TeamID' }, { mData: 'VehicleID' } ], "aoColumnDefs": [ { "aTargets": [0], "mRender": function(data, type, full) { return "<td><label><input type='checkbox'class='ace' /><span class='lbl'></span></label></td>"; } }, ], "aLengthMenu": [10,20,30,40,50, 100], "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src=’./loading.gif’ />" } } ); $("#acecom").on('click',function(){ console.log("reload"); oTable1.ajax.reload(); }) }) ```
datatables.min.js 重新绑定datatable的数据
使用datatables.min.js进行table的分页, 筛选后重新从后台查询数据修改table信息, 但是datatable的绑定信息没有被修改, 还是第一次的table内容, 网上找的"bDestroy": true,也没有效果, 请各位大神帮忙看看. 谢谢! ``` function GetList() { var UserName = $("#txt_keyword").val(); var selectId = $("#AccountSelect").val(); $.ajax({ type: "POST", url: "/Backstage/SystemManage/GetUserForAjax", data: { UserName: UserName, selectId: selectId }, success: function (result) { html = ""; if (selectId != -1) { //$('.table').dataTable().fnClearTable(); //将数据清除 } if (result.State == 0 && result.Data.length > 0) { for (var i = 0; i < result.Data.length; i++) { html += "<tr>"; html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>"; html += "<td><small>" + result.Data[i].Account + "</small></td>"; html += "<td><small>" + result.Data[i].RealName + " </small></td>"; html += "</tr>"; } } $("#tbodyDept").html(html); //$('.table').dataTable().fnRecordsDisplay(); //$(".table").dataTable().fnDraw(); var table = $('.table').dataTable({ "bFilter": false, //过滤功能 "bDestroy": true, "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 //"bDeferRender": true, "bPaginate": true, //开启分页功能,如果不开启,将会全部显示 "bProcessing": true, //"bInfo": true, "iDisplayLength": 5, "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); ```
jQuery.dataTables.js插件的样式问题
参考的博文: [jQuery]jQuery DataTables插件自定义Ajax分页实现 - seayxu - 博客园 http://www.cnblogs.com/seayxu/p/5513907.html 使用的后台模板: DataTables | Gentelella https://colorlib.com/polygon/gentelella/tables_dynamic.html # _就我的显示不正常_ ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998971_519569.png) 博文里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499998992_800222.png) 模板里的: ![图片说明](https://img-ask.csdn.net/upload/201707/14/1499999007_493026.png) 我的js: //初始化表格 function initTable() { table = $("#dataTable").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //原生搜索 orderMulti: false, //多列排序 ordering : false, //排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui pagingType: "full_numbers", //分页样式:simple,simple_numbers,full,full_numbers scrollY: "500px", //滚动条 scrollCollapse: "true", columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { $.ajax({ type: "GET", url: "getData", cache: false, //禁用缓存 data: { "page" : (data.start/data.length)+1, "rows" : data.length, }, dataType: "json", success: function (result) { //封装返回数据 var returnData = {}; returnData.draw = data.draw; returnData.recordsTotal = result.totalRecords; returnData.recordsFiltered = result.totalRecords; returnData.data = result.list;//返回的数据列表 console.log(returnData); callback(returnData); } }); }, //列表表头字段 columns: columns_arr }).api(); } 我的html: <!--数据表的内容--> <div style="margin-top: 50px;"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_content"> <table id="dataTable" data-reportid="${info.id}" class="table table-striped table-bordered"> <thead> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> <!--/数据表的内容-->
jQuery的datatable更新问题
function getProvince() { var province=document.getElementById("selProvince").value; $('#buchongList').dataTable().fnClearTable(); $.ajax({ type: "post", url: "/IotCloud-bugtrapper-service/rest/dynamic/listDynamicData", datatype: "json", data: { "time_type":"0", "filter_province":"10" }, success: function (data) { info = data.data; table = $('#buchongList').DataTable({ "filter": [ 6, false ], "bPaginate": true, "pagingType": "full_numbers", "bFilter": true, "bLengthChange": true, "bDestroy":true, "bInfo": true, "bSort": true, "retrieve":true, "oLanguage": { "sZeroRecords": "没有数据", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } }, "columnDefs": [ { "targets": [12], "defaultContent": "<button id='shuju' style='cursor:pointer;color:#009ACD; margin-left:20px; background-color:transparent;border:none;outline:none;'><img src='img/icon2.png'></button>" + "<button id='download' style='cursor:pointer;color:#009ACD; margin-left:0px; background-color:transparent;border:none;outline:none;'><img src='img/icon1.png'></button>"+ "<button id='reset' style='cursor:pointer;color:#009ACD; margin-left:0px; background-color:transparent;border:none;outline:none;'><img src='img/icon3.png'></button>" }, {"orderable":false,"targets":[3,4,5] }, {"targets": [ 0 ], "visible": false}, ], data:info, columns: [ {data: ''}, {data: 'gatewayId'}, {data: "trapperUnitId"}, {data: 'trapperName'}, {data: 'locationName'}, {data: 'trapperAddr'}, {data: 'temp'}, {data: 'humidity'}, {data: 'windSpeed'}, {data: 'lightSource'}, {data: 'rainfall'}, {data: 'bugCount'} ] }); } }) } 要实现table更新。我先clear了表格,然后却加载不出数据了?求大神解释,谢谢。
Jquery的DataTable可以从缓存里面绑定数据吗?
that.WarrantyStatusEditCtrl = function($scope, $compile, $routeParams, $location, $log, apiService, columns, cacheService, commonUtils, DT_OPTION, WARRANTY_HEADER, $rootScope) { $scope.header = WARRANTY_HEADER.STATUS_EDIT; $scope.base = base; var updateObj = {}; var columnDefs = []; var currentStatus = $routeParams.status.substr(1); // 隐藏データチエツクコメント、操作 if (currentStatus === "4" || currentStatus === "5") { columnDefs = [{ "targets": [5], "visible": false, "searchable": false }, { "targets": [6], "visible": false, "searchable": false }]; } // Show【FJ納品手続き】Button if (currentStatus === "3") { $scope.showScheduleBtn = true; } $scope.queryParams = cacheService.cache('tstp.queryParams'); $scope.queryParams.ngFlg = [currentStatus]; $scope.queryParams.tscd = $routeParams.tscd; $scope.queryParams.tpcd = $routeParams.tpcd; var jumpFromCtrl = $rootScope.oldRoute.substr($rootScope.oldRoute.length - 12) ==='/edit/fillin'; if (jumpFromCtrl === false) { $scope.table = $('#dtList').DataTable($.extend({}, DT_OPTION, { // IF14102: 保証作業費請求状況の確認 ajax: apiService.dtAjax("/getRepairDetailInfo", $scope.queryParams, 'e.queryParams', function(data, info) { if (info) { $scope.tsnm = info.tsnm; $scope.tpnm = info.tpnm; cacheService.cache("tstp", { tscd: $routeParams.tscd, tpcd: $routeParams.tpcd, tsnm: $scope.tsnm, tpnm: $scope.tpnm }); } $scope.$apply(); cacheService.cache('warrantyCache.data', data); return data; }), columns: columns.warrantyStatusEdit('/warranty'), columnDefs: columnDefs, createdRow: function(row, data, index) { $compile(angular.element(row).contents())($scope); var selector = $(row).find('select').val(data.ngFlg); var input = $(row).find('input'); if (updateObj[data.mrNo]) { data = updateObj[data.mrNo]; var ngFlg = data.ngFlg; selector.val(ngFlg); if (ngFlg === "2") { input.val(data.ngRiyu); } } if (data.ngFlg !== "2") { input.prop("disabled", true).addClass("readonly"); } selector.on('change', function() { var selectVal = selector.val(); if (selectVal === "2") { input.prop("disabled", false).removeClass("readonly"); } else { input.prop("disabled", true).addClass("readonly"); input.val(""); data.ngRiyu = ""; } if (selectVal !== currentStatus || selectVal === "2") { data.ngFlg = selectVal; updateObj[data.mrNo] = data; } else if (selectVal === currentStatus) { delete updateObj[data.mrNo]; } groupObj(updateObj); }); input.on('change', function() { data.ngRiyu = input.val(); updateObj[data.mrNo] = data; groupObj(updateObj) }); var checkBtn = $(".check button", row); checkBtn.on('click', function() { cacheService.cache('warrantyCache.warranty', data); $location.path("/warranty/" + data.mrNo + "/check"); $scope.$apply(); }); $scope.$apply(); } })); } else { readCache(); } columns: columns.warrantyStatusEdit('/warranty'),//模板 readCache();//读取缓存里面的数据,我用的angularjs的双向绑定可以显示数据,但是工作量比较大模板判断比较多,所有请教下各位大神.
Jquery packagingdatatabledata is not defined
具体如下: $('#jfsearch').on( 'click', function () { var jfondate = $('#jfondate').is(':checked'); var jfzhtype = $('#jfzhtype').val(); $.ajax({ url: ctx+"jffindByTypeAndDate", data:{flag:jfondate,tenantType:jfzhtype}, dataType:'json', success:function(msgObj){ $('#charging_table').dataTable().fnClearTable(); $('#charging_table').dataTable().fnAddData(packagingdatatabledata(msgObj),true); }, error:function(){ alert('error'); } }) })
Jquery DataTable服务端获取draw,start和length参数的值为null
前端代码: <table id="dtable" class="display"> <thead> <tr> <th>姓名</th> <th>编号</th> </tr> </thead> </table> <scripts type="text/javascript"> $(document).ready(function(){ $("#dtable").dataTable({ "serverSide":true, "ajax":{ "url":"/Approval/GetApprovalFormList", type":post }, "columns":[ {"data":"Name"}, {"data":"ID"} ] }) }) </scripts> 服务端代码: public JsonResult GetApprovalFormList() { string start=this.Request["start"]; string length=this.Request["end"]; }
关于datatable ajax向后端参,search始终为空的wen'ti
我尝试利用ajax向后端传递搜索的参数,后端得到的search参数始终为空值 具体js代码如下 ``` const table = $('#weatherTable').DataTable({ bFilter: false, "processing": true, serverSide: true, ajax: { url: "", type: "post", data: function (data) { return JSON.stringify(data); } } }); $("#searchLocation").on('keyup',function () { var location = this.value; table.search(location).draw(); }); ``` 我后端每次在输入框输入值都有一条ajax请求过去,但是不管输入什么值,search参数的值始终为空,不知道为什么。 ![图片说明](https://img-ask.csdn.net/upload/201911/19/1574178840_22957.png) 注意这个value始终为空值 ji'qiu
jquery dataTable解析后台传回的json报错
JSP: ``` <table class="table table-striped table-hover table-bordered" id="sample_editable_1"> <thead> <tr> <th>实验室名称</th> <th>所属学院</th> <th>分类</th> <th>创建日期</th> <th>创建人</th> <th>编辑</th> <th>删除</th> </tr> </thead> <tbody> </tbody> ``` 前台js: ``` var oTable = $('#sample_editable_1').dataTable({ "aLengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "iDisplayLength": 15, "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ 每页显示条数", "oPaginate": { "sPrevious": "上一页", "sNext": "下一页" } }, "aoColumns" : [{ "rows" : "labName" },{ "rows" : "academy" }, { "rows" : "category" } , { "rows" : "createTime" } , { "rows" : "createrName" } , { "rows" : "" }, { "rows" : "" }], "bProcessing":false, "bServerSide":true, "sAjaxSource":"/getAllLabInfo", "fnServerData":function ( sSource,aoData, fnCallback) { $.ajax({ url : sSource,//这个就是请求地址对应sAjaxSource data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 type : 'post', dataType : 'json', async : false, success : function(result) { alert(result.rows[0].labName); fnCallback(result.rows);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error : function(msg) { } }); alert(aoData); } }); ``` 后台json: {"total":3,"rows":[{"createTime":"2016-05-12 17:01:30.000000","labName":"物理实验室","id":1,"category":"物理类","academy":"理学院","createrName":"sysadmin"},{"createTime":"2016-05-12 17:01:37.000000","labName":"化学实验室","id":2,"category":"化学类","academy":"理学院","createrName":"sysadmin"},{"createTime":"2016-05-12 17:01:40.000000","labName":"金工实习","id":3,"category":"车床打磨","academy":"主校区","createrName":"sysadmin"}]} 报错: ![图片说明](https://img-ask.csdn.net/upload/201605/12/1463066615_880510.jpg) ![图片说明](https://img-ask.csdn.net/upload/201605/12/1463066664_584182.jpg) 求大神解惑,整了一下午了,再不能只能改用easyui了
这个datatable 的ajax 怎么写,麻烦大佬给填充一下
这里边的ajax请求不会写,麻烦大佬给填充一下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>二十九师信息</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <style> .content { margin: 50px auto; border: 1px solid #ccc; } .operation { margin: 10px; } .operation>button { margin: 10px; } #books_length { float: left; margin-left: 20px; } #books_filter { float: right; margin-right: 20px; } #books { margin: 5px; text-align: center; } .center-block { display: block; width: 21%; margin: auto; } </style> </head> <body> <section class="content"> <div class="btn-group operation"> <button id="btn_add" type="button" class="btn bg-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn bg-info"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button type="button" class="btn btn-primary" >导出Excel</button> </div> <!-- 添加模块 --> <div class="modal fade" id="addBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">添加信息</h4> </div> <div id="addBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="bookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="bookName" type="text"> </div> </div> <div class="form-group"> <label for="bookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="bookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="bookPrice" class="col-sm-2 control-label">家庭住址:*</label> <div class="col-sm-10"> <input class="form-control" id="bookPrice" type="text"> </div> </div> <div class="form-group"> <label for="bookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="bookPublish" type="text"> </div> </div> <div class="form-group"> <label for="bookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="bookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 修改模块 --> <div class="modal fade" id="editBookInfo" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">修改信息</h4> </div> <div id="editBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="editBookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="editBookName" type="text"> </div> </div> <div class="form-group"> <label for="editBookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="editBookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="editBookPrice" class="col-sm-2 control-label">家庭住址:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPrice" type="text"> </div> </div> <div class="form-group"> <label for="editBookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPublish" type="text"> </div> </div> <div class="form-group"> <label for="editBookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="editBookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 删除模块 --> <div class="modal fade" id="deleteBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">确认要删除吗?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button> </div> </div> </div> </div> <!-- 页面view层 --> <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>家庭住址</th> <th>联系电话</th> <th>备注</th> </tr> </thead> <tbody></tbody> </table> </section> </body> <script> var data = [['', '李云龙', '男', '三八六旅', '133435435', '厉害']] var titles = ['','姓名', '性别', '家庭住址', '联系电话', '备注'] $(function () { var table = $('#books').DataTable({ data: data, "pagingType": "full_numbers", "bSort": true, "language": { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "buttons": [{ 'extend': 'excel', 'text': '导出为Excel统计表',//定义导出excel按钮的文字 'className': 'btn btn-primary', //按钮的class样式 'exportOptions': { 'modifier': { 'page': 'all' } } }], "columnDefs": [{ "searchable": true, "orderable": false, "targets": 0 }], "order": [[0, 'asc']], }); table.on('order.dt search.dt', function() { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); }).draw(); $('#books tbody').on('click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $("#cancelAdd").on('click', function() { console.log('cancelAdd'); $("#addBookModal").find('input').val('') }) $("#addBooksInfo").on('click', function() { console.log('addBooksInfo'); if (data.length) { if ($("#addBookModal").find('input').val() !== '') { var bookbutton = $("#bookbutton").val() var bookName = $("#bookName").val() var bookAuthor = $("#bookAuthor").val() var bookPrice = $("#bookPrice").val() var bookPublish = $("#bookPublish").val() var bookISBN = $("#bookISBN").val() var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN); for (var i = 0; i < addBookInfos.length; i++) { if (addBookInfos[i] === '') { alert(titles[i] + '内容不能为空') } } table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw(); $("#addBookModal").find('input').val('') } } else { alert('请输入内容') } }) $("#addBooksInfo").click(); $("#btn_add").click(function(){ console.log('add'); $("#addBook").modal() }); $('#btn_edit').click(function () { console.log('edit'); if (table.rows('.selected').data().length) { $("#editBookInfo").modal() var rowData = table.rows('.selected').data()[0]; var inputs = $("#editBookModal").find('input') for (var i = 0; i < inputs.length; i++) { $(inputs[i]).val(rowData[i + 1]) } } else { alert('请选择项目'); } }); $("#saveEdit").click(function() { var editBookName = $("#editBookName").val() var editBookAuthor = $("#editBookAuthor").val() var editBookPrice = $("#editBookPrice").val() var editBookPublish = $("#editBookPublish").val() var editBookISBN = $("#editBookISBN").val() var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN); var tds = Array.prototype.slice.call($('.selected td')) for (var i = 0; i < newRowData.length; i++) { if (newRowData[i] !== '') { tds[i + 1].innerHTML = newRowData[i]; } else { alert(titles[i] + '内容不能为空') } } }) $("#cancelEdit").click(function() { console.log('cancelAdd'); $("#editBookModal").find('input').val('') }) $('#btn_delete').click(function () { if (table.rows('.selected').data().length) { $("#deleteBook").modal() } else { alert('请选择项目'); } }); $('#delete').click(function () { table.row('.selected').remove().draw(false); }); }) </script> </html> ```
关于Jquery DataTables 数据绑定问题
AJAX 的Success回调到后台返回的Json字符串。 如:[{"amount":2,"apply_id":1"},{"amount":3,"apply_id":2"}] 前台代码: success: function(data){ $('#table_id_example').DataTable({ //我应当怎么写,才能把data绑到Table中 }); },
datatables.min.js的使用
使用datatables.min.js对table进行分页处理, 5条一页, 首次登陆界面后台查询9条数据到前台正常显示分为2页, 后修改select控件, 再次调用后台查询到7条数据到前台, 前台报错, 如下图, 而且通过上一页下一页还是可以查询到9条数据, 这是怎么回事, 调试时也检查了后台传递过来的值是7条的.请各位大神帮忙看看, 是不是还有什么属性没有设置, 谢谢! ![图片说明](https://img-ask.csdn.net/upload/201703/15/1489563612_525968.png) ``` function GetList() { var UserName = $("#txt_keyword").val(); var selectId = $("#AccountSelect").val(); $.ajax({ type: "POST", url: "/Backstage/SystemManage/GetUserForAjax", data: { UserName: UserName, selectId: selectId }, success: function (result) { html = ""; $("#tbodyDept").html(html); if (result.State == 0 && result.Data.length > 0) { for (var i = 0; i < result.Data.length; i++) { html += "<tr>"; html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>"; html += "<td><small>" + result.Data[i].Account + "</small></td>"; html += "<td><small>" + result.Data[i].RealName + " </small></td>"; html += "</tr>"; } } $("#tbodyDept").html(html); $('.table').DataTable({ "iDisplayLength": 5, "bFilter": false, //过滤功能 "bSort": false, //排序功能 "bLengthChange": false, //改变每页显示数据数量 "oLanguage": { "sZeroRecords": "没有找到符合条件的数据", "sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "没有记录", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); }, error: function () { $("#tbodyDept").html("<tr><td colspan=\"10\"><small class=\"text-warning\">查询数据出现错误!</small></td></tr>"); } }); } ``` 可能描述的不太清楚, 实现过程就是通过select控件选择重新查询数据.
highchart实时刷新数据,x轴不显示所需时间
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="HighchartsDemo._Default1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>汽油吸附脱硫装置2#S-ZORB</title> <!-- 注意文件名应该和你下载的文件名保持一致 --> <script type="text/javascript"src="HighCharts/jquery-1.8.3.min.js"></script> <script type="text/javascript"src="HighCharts/highcharts.js"></script> <script type="text/javascript"src="HighCharts/TimeConvertor.js"></script> </head> <body> <script type="text/javascript"> //<![CDATA[ $(function (datetimeCom, growth) { // Highcharts.Chart Begin Highcharts.setOptions({ global: { useUTC: false //当X轴类型为datetime日期时间型的,需要设置时区 } }); //声明报表对象 var chart = new Highcharts.Chart({ chart: { //将报表对象渲染到层上 renderTo: 'container', //图表放置的容器,DIV defaultSeriesType: 'spline', //图表类型为曲线图,可取值有:line、spline、area、areaspline、bar、column等 events: { load: loadTime } }, //chart end title: { text: '汽油吸附脱硫装置2#S-ZORB曲线' }, yAxis: { title: { text: '2#S-ZORB实时值' } }, xAxis: { title: { text: '时间' }, type: 'datetime', //坐标间隔 labels: { step: 10, // formatter: function () { // return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); // } } }, //鼠标放在某个点上时的提示信息 //dateFormat,numberFormat是highCharts的工具类 tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.xtime) + '<br/>' + this.x + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, //设定报表对象的初始数据 series: [{ name: '2#S-ZORB实时值', data: [] }] }); //获取初始化数据 getInitialData(); //Highcharts.Chart end //获取初始化30分钟数据 function getInitialData() { $.ajax({ type: "Post", //后台获取数据的函数,注意当对该页面重命名时, //必须手动更改该选项 url: "Default1.aspx/getInitialDataByAjax", contentType: "application/json;charset=utf-8", dataType: "json", //成功获取数据 success: function (result) { data = jQuery.parseJSON(result.d); //JSON再次转换为Table 形式; var datetimeCom = '['; var growth = '['; for (var i = 0; i < data.length; i++) { datetimeCom += "\'" + ConertJsonTimeAndFormat(data[i]["x"], 'yyyy/MM/dd hh:mm:ss') + "\',"; growth += data[i]["y"] + ","; } if (datetimeCom != '[') { datetimeCom = datetimeCom.substr(0, datetimeCom.length - 1) + "]"; growth = growth.substr(0, growth.length - 1) + "]"; } chart.xAxis[0].setCategories(eval(datetimeCom)); chart.series[0].setData(eval(growth)); //显示错误 }, error: function (err) { alert(err + "初始化程序出现错误,请尝试刷新!"); } }); } // 每分钟获取后台数据 function getActualData() { var x = (new Date()).getTime(); // 当前时间 $.ajax({ type: "Post", //后台获取数据的函数,注意当对该页面重命名时, //必须手动更改该选项 url: "Default1.aspx/getDataTableByAjax", contentType: "application/json;charset=utf-8", dataType: "json", //成功获取数据 success: function (result) { data = jQuery.parseJSON(result.d); //JSON再次转换为Table 形式; var series = chart.series[0]; series.addPoint([data[0]["x"], data[0]["y"]], false, true); // alert(data[0]["x"]); // var datetimeCom = '['; // for (var i = 0; i < data.length; i++) { // datetimeCom += "\'" + data[i]["x"] + "\',"; // } // if (datetimeCom != '[') { // datetimeCom = datetimeCom.substr(0, datetimeCom.length - 1) + "]"; // } // chart.xAxis[0].setCategories(eval(datetimeCom)); chart.redraw(); }, //显示错误 error: function (err) { alert(err + "调用后台程序出现错误,请尝试刷新!"); } }); } function loadTime() { window.setInterval(getActualData, 2000); } // $(document).ready(function () { // //每隔1分钟自动调用方法,实现图表的实时更新 60000 // window.setInterval(getActualData, 2000); // }); }); //]]> // 后台Date前台转换json格式 function JsonDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + currentDate; } </script> <div id="container" style="width: 800px; height: 600px; margin: 0 auto"></div> </body> </html> 后台传入数据格式为DataTable。 在线等啊,请高手指教!!!
在data最后一列加上删除和修改按钮,自己加了之后一直报数据项错误,麻烦大佬们帮下忙?
在data最后一列加上删除和修改按钮,自己加了之后一直报数据项错误,麻烦大佬帮下忙 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>二十九师信息</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <style> .content { margin: 50px auto; border: 1px solid #ccc; } .operation { margin: 10px; } .operation>button { margin: 10px; } #books_length { float: left; margin-left: 20px; } #books_filter { float: right; margin-right: 20px; } #books { margin: 5px; text-align: center; } .center-block { display: block; width: 21%; margin: auto; } </style> </head> <body> <section class="content"> <div class="btn-group operation"> <button id="btn_add" type="button" class="btn bg-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn bg-info"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button type="button" class="btn btn-primary" >导出Excel</button> </div> <!-- 添加模块 --> <div class="modal fade" id="addBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">添加信息</h4> </div> <div id="addBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="bookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="bookName" type="text"> </div> </div> <div class="form-group"> <label for="bookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="bookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="bookPrice" class="col-sm-2 control-label">家庭住址:*</label> <div class="col-sm-10"> <input class="form-control" id="bookPrice" type="text"> </div> </div> <div class="form-group"> <label for="bookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="bookPublish" type="text"> </div> </div> <div class="form-group"> <label for="bookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="bookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 修改模块 --> <div class="modal fade" id="editBookInfo" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">修改信息</h4> </div> <div id="editBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="editBookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="editBookName" type="text"> </div> </div> <div class="form-group"> <label for="editBookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="editBookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="editBookPrice" class="col-sm-2 control-label">家庭住址:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPrice" type="text"> </div> </div> <div class="form-group"> <label for="editBookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPublish" type="text"> </div> </div> <div class="form-group"> <label for="editBookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="editBookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 删除模块 --> <div class="modal fade" id="deleteBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">确认要删除吗?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button> </div> </div> </div> </div> <!-- 页面view层 --> <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>家庭住址</th> <th>联系电话</th> <th>备注</th> </tr> </thead> <tbody></tbody> </table> </section> </body> <script> var data = [['', '李云龙', '男', '三八六旅', '133435435', '厉害']] var titles = ['','姓名', '性别', '家庭住址', '联系电话', '备注'] $(function () { var table = $('#books').DataTable({ data: data, "pagingType": "full_numbers", "bSort": true, "language": { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "buttons": [{ 'extend': 'excel', 'text': '导出为Excel统计表',//定义导出excel按钮的文字 'className': 'btn btn-primary', //按钮的class样式 'exportOptions': { 'modifier': { 'page': 'all' } } }], "columnDefs": [{ "searchable": true, "orderable": false, "targets": 0 }], "order": [[0, 'asc']], }); table.on('order.dt search.dt', function() { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); }).draw(); $('#books tbody').on('click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $("#cancelAdd").on('click', function() { console.log('cancelAdd'); $("#addBookModal").find('input').val('') }) $("#addBooksInfo").on('click', function() { console.log('addBooksInfo'); if (data.length) { if ($("#addBookModal").find('input').val() !== '') { var bookbutton = $("#bookbutton").val() var bookName = $("#bookName").val() var bookAuthor = $("#bookAuthor").val() var bookPrice = $("#bookPrice").val() var bookPublish = $("#bookPublish").val() var bookISBN = $("#bookISBN").val() var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN); for (var i = 0; i < addBookInfos.length; i++) { if (addBookInfos[i] === '') { alert(titles[i] + '内容不能为空') } } table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw(); $("#addBookModal").find('input').val('') } } else { alert('请输入内容') } }) $("#addBooksInfo").click(); $("#btn_add").click(function(){ console.log('add'); $("#addBook").modal() }); $('#btn_edit').click(function () { console.log('edit'); if (table.rows('.selected').data().length) { $("#editBookInfo").modal() var rowData = table.rows('.selected').data()[0]; var inputs = $("#editBookModal").find('input') for (var i = 0; i < inputs.length; i++) { $(inputs[i]).val(rowData[i + 1]) } } else { alert('请选择项目'); } }); $("#saveEdit").click(function() { var editBookName = $("#editBookName").val() var editBookAuthor = $("#editBookAuthor").val() var editBookPrice = $("#editBookPrice").val() var editBookPublish = $("#editBookPublish").val() var editBookISBN = $("#editBookISBN").val() var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN); var tds = Array.prototype.slice.call($('.selected td')) for (var i = 0; i < newRowData.length; i++) { if (newRowData[i] !== '') { tds[i + 1].innerHTML = newRowData[i]; } else { alert(titles[i] + '内容不能为空') } } }) $("#cancelEdit").click(function() { console.log('cancelAdd'); $("#editBookModal").find('input').val('') }) $('#btn_delete').click(function () { if (table.rows('.selected').data().length) { $("#deleteBook").modal() } else { alert('请选择项目'); } }); $('#delete').click(function () { table.row('.selected').remove().draw(false); }); }) </script> </html> ``麻烦各位大佬帮下忙
MUI.Ajax 调用WebService报错?实在找不到问题。
mui.ajax 调用 WEB Service 报错 ## Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8848' is therefore not allowed access. The response had HTTP status code 500. ![图片说明](https://img-ask.csdn.net/upload/201902/12/1549956611_90481.png) ``` function getData() { var result = ""; mui.ajax("http://mobile.china-crown.com:8088/Service.asmx/GetCustomerPageList", { data: { "PageIndex": "1", "SiteID": "28822" }, dataType: 'json', type: 'get', timeout:10000,//超时时间设置为10秒; headers: { 'Content-Type': 'application/json' }, success: function(data) { mui('#Custlist').pullRefresh().endPullupToRefresh(true); //下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定 var model = JSON.parse(data); $.each(model, function(i, value) { result += '<li class="mui-table-view-cell mui-media">' + '<a href="javascript:;">' + '<div class="mui-media-body">' + value.CustName + '</div>' + '</a>' + '</li>'; }) var element = document.getElementById("CustomerUlID"); element.innerHTML = result; }, error: function(xhr, type, errorThrown) { //异常处理; console.log(type); } }); } ``` ``` [WebMethod] //[ScriptMethod(ResponseFormat = ResponseFormat.Json)] public void GetCustomerPageList(int PageIndex, int SiteID) { string JsonStr = ""; try { int PageSize = ConfigurationManager.AppSettings["PageSize"].ObjectToInt32(); //总数量 int Count = this.GetCustomerListCount(SiteID); PageInfo PageResult = new PageInfo(PageIndex, PageSize, Count); if (!PageResult.IsBottom) { string con = SystemHelper.GetAccountSetConnect(); string Sqlcon = ConfigurationManager.ConnectionStrings[con].ConnectionString; SqlParameter[] para = { new SqlParameter("@SiteID", Convert.ToInt32(SiteID)), new SqlParameter("@BeginPage", Convert.ToInt32(PageResult.BeginPage)), new SqlParameter("@EndPage", Convert.ToInt32(PageResult.EndPage)) }; DataTable dt = SQLDBHelper.ExecuteQueryDt(Sqlcon, "up_Sel_CustomerList", CommandType.StoredProcedure, 0, para); JsonStr = JsonHelper.DataTableToJson(dt); Context.Response.Charset = "GB2312"; //设置字符集类型 Context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312"); Context.Response.Write(JsonStr); Context.Response.End(); } } catch (Exception ex) { } //return JsonStr; } ```
springmvc + tiles 局部刷新页面中的document.ready事件没有触发
We get a page with 2 columns layout (also include header and footer). In the left part, it is a tree. And the right part is the content which will be changed based on the click event on the leaf of the left tree. We use springmvc 4.0.6.RELEASE and apache tiles 3.0.5 and we adopt the solution provided on link: http://stackoverflow.com/questions/17719176/noclassdeffounderror-while-using-ajaxurlbasedviewresolver-in-spring-mvc-3. And we really get it work. Below are my solution: reportTemplate.jsp define the common overview layout. <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <jsp:include page="../pages/common/import.jsp"></jsp:include> <body class="body-white root1200"> <tiles:insertAttribute name="header" /> <div class="g-content wrapper clearfix "> <tiles:insertAttribute name="menu" /> <div class="m-content"> <div class="iframe-inner"> <tiles:insertAttribute name="main" /> <div id="fragment"></div> </div> </div> </div> <tiles:insertAttribute name="footer" /> </body> </html> layout.xml defines each part of the layout. <tiles-definitions> <definition name="reportTemplate" template="/WEB-INF/templates/reportTemplate.jsp"> <put-attribute name="header" value="/WEB-INF/pages/common/header.jsp" /> <put-attribute name="menu" value="/WEB-INF/pages/common/menu.jsp" /> <put-attribute name="main" value="" /> <put-attribute name="footer" value="/WEB-INF/pages/common/footer.jsp" /> </definition> </tiles-definitions> views.xml when click the tree, we use the second definition which has null configuration for "main" attribute. <definition name="admin/configuration/listReports" extends="reportTemplate"> <put-attribute name="main" value="/WEB-INF/pages/admin/configuration/listReports.jsp" /> </definition> <definition name="admin/configuration/listReports-m" extends="reportTemplate"> </definition> Controller @RequestMapping(value = "/admin/report/ajax/listReports", method = RequestMethod.GET) public String ajaxListReport(Map<String, Object> model, @RequestParam(value="from",required=false) String from) { model.put("report", new Report()); if(from != null && !from.equalsIgnoreCase("headMenu")){ return "admin/configuration/listReports-m"; } else { return "admin/configuration/listReports"; } } in listReports.jsp, we use jquery datatable plugin and the table will be initialized when document.ready event fired. $(document).ready(function() { table = $('#example').dataTable({ "bProcessing" : true, "bServerSide" : true, "iDisplayLength" : 10, "bSort" : true, "dataType" : "json", "sAjaxSource" : "ajax/getReport?repName="+$('#repName').val(), "sAjaxDataProp": "aaData", ... }); } ); It works properly when use the 1st definition which include "main" part. When we click on the leaf of the tree, the page loaded, but the data of the jquery datatable not load. onClick: function(data2) { console.log(data2); $.ajax({ type : "GET", beforeSend : function(request) { request.setRequestHeader("Accept", "text/html;type=ajax"); }, url : "/fiba/admin/report/ajax/listReports?fragments=main", processData : false, success : function(msg) { $('div[id="fragment"]').empty().append(msg); } }); } We think the reason is that ajax call will not trigger doucment.ready event on listReport.jsp. How can we resolve this issue? Or is there any simple solution for partial refresh of the complex layout? On the listReport.jsp we also have some actions need be triggerred.
style未定义!!!!!!!!!!!
<%@ page contentType="text/html;charset=UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <!DOCTYPE HTML> <html> <head> <jsp:include page="/WEB-INF/jsp/web/common.jsp"/> <title>用户管理</title> </head> <body> <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" id="refresh"><i class="Hui-iconfont">&#xe68f;</i></a> </nav> <div class="page-container"> <div class="text-c"> <button onclick="removeIframe()" class="btn btn-primary radius">关闭选项卡</button> <span class="select-box inline"> <select class="select" id="sel_Sub" name="uuid" onchange=""> <c:forEach items="${cList}" var="item"> <option value="${item.id}">${item.user_name}</option> </c:forEach> </select> </span> <input type="text" name="" id="search-name" placeholder="用户名称、id" style="width:250px" class="input-text"> <button name="" id="search" class="btn btn-success" onclick="search();"><i class="Hui-iconfont">&#xe665;</i> 搜索 </button> </div> <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <a href="javascript:" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a class="btn btn-primary radius" onclick="system_user_add('添加用户','${ctx}/system/system-user-add')" href="javascript:"><i class="Hui-iconfont">&#xe600;</i> 添加用户</a> </span> <!--<span class="r">共有数据:<strong>54</strong> 条</span>--> </div> <div class="mt-20"> <table class="table table-border table-bordered table-hover table-bg table-sort"> <thead> <tr class="text-c"> <th width="25"><input type="checkbox" name="" value=""></th> <th width="20">用户名称</th> <th width="80">手机号</th> <th width="80">邮箱</th> <th width="20">操作</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <jsp:include page="/WEB-INF/jsp/web/footer.jsp"/> <script type="text/javascript" src="${ctx}/lib/My97DatePicker/4.8/WdatePicker.js"></script> <script type="text/javascript" src="${ctx}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> <script type="text/javascript" src="${ctx}/lib/laypage/1.2/laypage.js"></script> <script type="text/javascript"> var dataTable = $('.table-sort').dataTable({ "aaSorting": [[1, "desc"]],//默认第几个排序 "bStateSave": true,//状态保存 "searching": false, //开启搜索标志 "bProcessing": true, "aoColumnDefs": [ //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示 {"orderable": false, "aTargets": [0, 1, 3, 4, 5]}// 制定列不参与排序 ], "serverSide": true,//服务器分页标志 //ajax地址 "sAjaxSource": "${ctx}/system/system-user-list/json.dt",// action地址 "fnServerData": retrieveData,//执行方法 "fnRowCallback": retrieveColumnData,//返回数据重构 "fnServerParams": function (aoData) { aoData.push( {"name": "search", "value": $('#search-name').val()}, {"name": "uuid", "value": $('#sel_Sub').val()} ) }, //配置列要显示的数据 "columns": [ {"data": null}, {"data": "USER_NAME"}, {"data": "MOBILE"}, {"data": "EMAIL"}, {"data": null} ] }); function retrieveColumnData(nRow, aData, iDisplayIndex) { $('td:eq(0)', nRow).html('&nbsp;<input type="checkbox" value="" name="">'); var last = "<a title=\"编辑\" href=\"javascript:\"\n" + " onclick=\"system_user_edit('用户编辑','${ctx}/system/system-user-add','" + aData.UUID + "')\"\n" + " style=\"text-decoration:none\"><i class=\"Hui-iconfont\">&#xe6df;</i></a>\n" + " <a title=\"删除\" href=\"javascript:\" onclick=\"system_user_del(this,'" + aData.UUID + "')\" class=\"ml-5\"\n" + " style=\"text-decoration:none\"><i class=\"Hui-iconfont\">&#xe6e2;</i></a>"; $('td:last', nRow).html(last); $('td:last', nRow).addClass('f-14'); $(nRow).addClass('text-c'); return nRow; } function retrieveData(sSource, aoData, fnCallback) { /* post 方法调用*/ $.ajax({ "type": "post", "contentType": "application/json", "cache": false, //禁用缓存 "url": sSource, "dataType": "json", "data": JSON.stringify(aoData), "success": function (resp) { fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式 } }); } /*系统-用户-添加*/ function system_user_add(title, url, w, h) { layer_show(title, url, w, h); } /*系统-用户-编辑*/ function system_user_edit(title, url, id, w, h) { layer_show(title, url + '?id=' + id, w, h); } /*系统-用户-删除*/ function system_user_del(obj, id) { layer.confirm('确认要删除吗?', function (index) { $.ajax({ type: 'POST', url: '', dataType: 'json', success: function (data) { $(obj).parents("tr").remove(); layer.msg('已删除!', {icon: 1, time: 1000}); }, error: function (data) { console.log(data.msg); }, }); }); } function search() { dataTable.fnDraw(); } </script> </body> </html>
分页后GrideView新增一行空白行
项目中有个需求,需要对已经绑定数据并分页的GrideView进行新增一行空白行。用户在点击“新增行”后,在界GrideView界面的最下面增加一行空白行。 要求:1、用户在第几页点击新增行就在当前页面显示新增行; 2、新增行按钮在GrideView外面; 具体代码如下: ``` 前台页面代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YPCGJCB.aspx.cs" Inherits="CenterBase.供应链管理.YPCGJCB" %> <%@ Register Assembly="UserControls" Namespace="UserControls" TagPrefix="cc2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>药品折扣基础表</title> <link rel="stylesheet" href="../js/Grid/css/demo_page.css" /> <link rel="stylesheet" href="../js/DatePicker/base/jquery-ui.css" /> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="../js/JScript.js" type="text/javascript"></script> <script src="../js/DatePicker/jquery.ui.core.js" type="text/javascript"></script> <script src="../js/DatePicker/jquery.ui.datepicker.js" type="text/javascript"></script> <script src="../js/Ajax.js"></script> <script src="../js/jquery-1.4.1.js"></script> <style type="text/css"> .auto-style2 { height: 25px; } .auto-style3 { width: 156px; height: 25px; } .auto-style4 { margin-top: 5px; } .auto-style5 { text-align: right; } </style> <script language="javascript" type="text/javascript"> var dgPersonsID = "<%= YPZKXX.ClientID %>"; $(document).ready(function () { $("#dgPersons tr").eq(1).hide(); }); function AddNewRow() { var tr = $("#dgPersons tr").eq(1).clone(); tr.show(); tr.appendTo("#dgPersons"); refreshNo(); return false; } function refreshNo() { var dgg = document.getElementById(dgPersonsID); var index = 1; for (var i = 2; i < dgg.rows.length; ++i) { var cells = dgg.rows[i].cells; var row = dgg.rows[i]; if (row.style.display != "none") { cells[0].firstChild.nodeValue = index++; } } return false; } </script> </head> <body id="dt_example" class="ex_highlight_row"> <form id="form1" runat="server"> <div id="container"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: url(../images/Pop_page_back.gif)" align="center"> <tr> <td valign="center" style="height: 27px">&nbsp;<strong>药品折扣基础表</strong></td> </tr> </table> <div id="search"> <table class="t2" style="width:100%"> <tr> <td class="auto-style2">医院名称:</td> <td class="auto-style3"> <input type="text" id="txtyymc" runat="server" class="inputbox" readonly="true"/> </td> <td class="auto-style2">开始时间:</td> <td class="auto-style2"> <input type="text" id="txtkssj" runat="server" class="inputbox" readonly="true" /> </td> <td class="auto-style2">结束时间:</td> <td class="auto-style2"> <input type="text" id="txtjssj" runat="server" class="inputbox" readonly="true"/> </td> <td class="auto-style2">供应商名称:</td> <td class="auto-style2"> <input type="text" id="txtgys" runat="server" class="inputbox" readonly="true"/> </td> </tr> </table> </div> <div id="menu" class="auto-style5"> &nbsp;<asp:Button ID="Btn_Download" runat="server" Text="查 询" CssClass="buttoncss" OnClick="Btn_Download_Click"/> &nbsp; &nbsp;<asp:Button ID="btn_AddLine" runat="server" Text="新增行" CssClass="buttoncss" OnClientClick="return AddNewRow();return false;" /> &nbsp; &nbsp;<asp:Button ID="btn_xz" runat="server" Text="下 载" CssClass="buttoncss"/> &nbsp; &nbsp<asp:Button ID="btn_dr" runat="server" Text="导 入" CssClass="buttoncss" OnClick="btn_dr_Click" /> &nbsp; &nbsp;<asp:CheckBox runat="server" Text="显示历史数据" ID="cbo_xs" Checked="false" /> </div> <div> <asp:GridView ID="YPZKXX" runat="server" AutoGenerateColumns="False" Width="100%" HorizontalAlign="Center" style="text-align: center" NoNewline="word-break: keep-all;" CssClass="auto-style4" OnRowCancelingEdit="YPCGJCXX_RowCancelingEdit" OnRowEditing="YPCGJCXX_RowEditing" OnRowUpdating="YPCGJCXX_RowUpdating"> <EmptyDataTemplate> 没有数据 </EmptyDataTemplate> <FooterStyle ForeColor="White" BackColor="#3B6BD1" Font-Bold="True"></FooterStyle> <SelectedRowStyle Font-Bold="True" ForeColor="Navy" BackColor="#FFCC66" BorderColor="CornflowerBlue" /> <RowStyle ForeColor="#333333" BackColor="#FFFBD6" BorderColor="CornflowerBlue" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center" VerticalAlign="Bottom" Wrap="False" /> <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#3B6BD1" Wrap="False"></HeaderStyle> <Columns> <asp:TemplateField HeaderText="编号" Visible="false"> <ItemTemplate> <asp:Label ID="lbl_ID" runat="server" Text='<%# Bind("ID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="医院名称"> <ItemTemplate> <asp:Label ID="lbl_yymc" runat="server" Text='<%# Bind("yymc") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="供货商编码"> <ItemTemplate> <asp:Label ID="lbl_ghsbm" runat="server" Text='<%# Bind("ghsbm") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="中心编码"> <ItemTemplate> <asp:Label ID="txt_zxbm" runat="server" Text='<%# Bind("zxbm") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="药品编码"> <ItemTemplate> <asp:Label ID="lbl_ypbm" runat="server" Text='<%# Bind("ypbm") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="药品名称"> <ItemTemplate> <asp:Label ID="lbl_ypmc" runat="server" Text='<%# Bind("ypmc") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="药品规格"> <ItemTemplate> <asp:Label ID="lbl_ypgg" runat="server" Text='<%# Bind("ypgg") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="药品单位"> <ItemTemplate> <asp:Label ID="lbl_ypdw" runat="server" Text='<%# Bind("ykdw") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="返利形式"> <ItemTemplate> <asp:Label ID="txt_flxs" runat="server" Text='<%# Bind("flxs") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="厂家名称"> <ItemTemplate> <asp:Label ID="lbl_sccj" runat="server" Text='<%# Bind("cjmc") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="供货单位"> <ItemTemplate> <asp:Label ID="lbl_ghdw" runat="server" Text='<%# Bind("ghdw") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="底 价"> <ItemTemplate> <asp:Label ID="txt_dj" runat="server" Text='<%# Bind("dj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="折扣率"> <ItemTemplate> <asp:Label ID="txt_zkl" runat="server" Text='<%# Bind("zkl") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="开票价"> <ItemTemplate> <asp:Label ID="txt_kpj" runat="server" Text='<%# Bind("kpj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="零售价"> <ItemTemplate> <asp:Label ID="lbl_lsj" runat="server" Text='<%# Bind("lsj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="最新零售价"> <ItemTemplate> <asp:Label ID="lbl_zxlsj" runat="server" Text='<%# Bind("zxlsj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="售价差价"> <ItemTemplate> <asp:Label ID="txt_sjcj" runat="server" Text='<%# Bind("lscj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="成本价"> <ItemTemplate> <asp:Label ID="txt_cbj" runat="server" Text='<%# Bind("cbj") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="折 扣"> <ItemTemplate> <asp:Label ID="txt_zk" runat="server" Text='<%# Bind("zk") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="净利润"> <ItemTemplate> <asp:Label ID="txt_jlr" runat="server" Text='<%# Bind("jlr") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="业务费"> <ItemTemplate> <asp:Label ID="txt_ywf" runat="server" Text='<%# Bind("xywf") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="毛利率"> <ItemTemplate> <asp:Label ID="txt_mll" runat="server" Text='<%# Bind("mll") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="年"> <ItemTemplate> <asp:Label ID="lbl_nf" runat="server" Text='<%# Bind("nian") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="月"> <ItemTemplate> <asp:Label ID="lbl_yf" runat="server" Text='<%# Bind("yue") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="管理" ShowHeader="False"> <EditItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="更新"></asp:LinkButton> &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消"></asp:LinkButton> </EditItemTemplate> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="编辑"></asp:LinkButton> &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Update" Text="修改"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <cc2:PageTool ID="PageTool1" runat="server" Number="1" PageRows="10" PageCount="100"> </cc2:PageTool> </div> </form> </body> </html> ``` ``` 后台代码: using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace CenterBase.供应链管理 { public partial class YPCGJCB : System.Web.UI.Page { CenterBaseBLL.YPCGMC cbby = new CenterBaseBLL.YPCGMC(); private static int pCount = 0;//总页数 private static int rCount = 0;//总数据数 private static int pageIndex = 1;//当前页 private static int pageSize = 20;//页面大小 private static string tableName = "View_YPJCB";//表名 private static string fields = "ID,yymc, ghsbm, zxbm, ypbm, ypmc, ypgg, ykdw, flxs,cjmc,ghdw,dj,zkl,kpj,lsj,zxlsj,lscj,cbj,zk,jlr,xywf,mll,nian,yue";//查询的字段 private static string order = "ID desc";//排序 private static string primaryKey = "ID";//关键字 private static string where = " "; protected void Page_Load(object sender, EventArgs e) { //UnobtrusiveValidationMode = UnobtrusiveValidationMode.None; //Response.AddHeader("P3P", "CP=CAO PSA OUR"); ////检测用户是否登录 //if (!CheckUserLogin()) //{ // Response.Redirect("../LoginMain.aspx"); //} ////检测用户是否具有权限 //if (!CheckUserAuthority()) //{ // Response.Redirect("../LoginMain.aspx"); //} if (!Page.IsPostBack) { //分页初始化 if (Request.QueryString["page"] == null) { pageIndex = 1; } else { pageIndex = CenterBaseTools.ConvertData.ConvertDataFromStringToInt(Request.QueryString["page"].ToString()); } ////绑定数据 //if (cbo_xs.Checked == true) //{ //} DataBinds(); //Sum(); } } protected void Btn_Download_Click(object sender, EventArgs e) { where = ""; if (sqlwhere() != "") { where = where + sqlwhere(); } DataBinds(); } public void DataBinds() { DataTable dt = new DataTable(); dt = CenterBaseBLL.PageView.GetAll(out pCount, out rCount, pageIndex, pageSize, tableName, fields, order, primaryKey, 2, 0, where); YPZKXX.DataSource = dt; YPZKXX.DataBind(); this.PageTool1.PageRows = pageSize; this.PageTool1.PageCount = rCount; } public string sqlwhere() { string yymc = txtyymc.Value.ToString(); string kssk = txtkssj.Value.ToString(); string jssj = txtjssj.Value.ToString(); string ghs = txtgys.Value.ToString(); int res = kssk.CompareTo(jssj); string sql = ""; if (yymc != "") { sql = sql + " where CYYMC = '" + yymc + "'"; } if (yymc != "" && kssk != "" && jssj != "" && res < 0) { sql = sql + " where CYYMC='" + yymc + "' and DRKRQ between '" + kssk + "' and '" + jssj + "'"; } if (yymc != "" && kssk != "" && jssj != "" && res < 0 && ghs != "") { sql = sql + " where CYYMC='" + yymc + "' and DRKRQ between '" + kssk + "' and '" + jssj + "' and CGHDW = '" + ghs + "'"; } return sql; } protected void YPCGJCXX_RowEditing(object sender, GridViewEditEventArgs e) { YPZKXX.EditIndex = e.NewEditIndex; DataBinds(); } protected void YPCGJCXX_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) { YPZKXX.EditIndex = -1; DataBinds(); } protected void YPCGJCXX_RowUpdating(object sender, GridViewUpdateEventArgs e) { int id = Convert.ToInt32((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ID") as Label).Text); string yymc = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_yymc") as Label).Text); string ghsbm = (YPZKXX.Rows[e.RowIndex].FindControl("txt_ghsbm") as TextBox).Text.ToString(); string zxbm = (YPZKXX.Rows[e.RowIndex].FindControl("txt_zxbm") as TextBox).Text.ToString(); string ypbm = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ypbm") as Label).Text); string ypmc = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ypmc") as Label).Text); string ypgg = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ypgg") as Label).Text); string ypdw = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ypdw") as Label).Text); string flxs = (YPZKXX.Rows[e.RowIndex].FindControl("txt_flxs") as TextBox).Text.ToString(); string cjmc = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_sccj") as Label).Text); string ghdw = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_ghdw") as Label).Text); string dj = (YPZKXX.Rows[e.RowIndex].FindControl("txt_dj") as TextBox).Text.ToString(); string zkl = (YPZKXX.Rows[e.RowIndex].FindControl("txt_zkl") as TextBox).Text.ToString(); string kpj = (YPZKXX.Rows[e.RowIndex].FindControl("txt_kpj") as TextBox).Text.ToString(); string lsj = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_lsj") as Label).Text); string dykpj = (YPZKXX.Rows[e.RowIndex].FindControl("txt_dykpj") as TextBox).Text.ToString(); string zxlsj = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_zxlsj") as Label).Text); string sjcj = (YPZKXX.Rows[e.RowIndex].FindControl("txt_sjcj") as TextBox).Text.ToString(); string cbj = (YPZKXX.Rows[e.RowIndex].FindControl("txt_cbj") as TextBox).Text.ToString(); string zk = (YPZKXX.Rows[e.RowIndex].FindControl("txt_zk") as TextBox).Text.ToString(); string jlr = (YPZKXX.Rows[e.RowIndex].FindControl("txt_jlr") as TextBox).Text.ToString(); string ywf = (YPZKXX.Rows[e.RowIndex].FindControl("txt_ywf") as TextBox).Text.ToString(); string mll = (YPZKXX.Rows[e.RowIndex].FindControl("txt_mll") as TextBox).Text.ToString(); string nf = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_nf") as Label).Text); string yf = Convert.ToString((YPZKXX.Rows[e.RowIndex].FindControl("lbl_yf") as Label).Text); DateTime time = System.DateTime.Now; string sql = "insert into YPFXJCXX(yymc,ghsbm,zxbm,ypbm,ypmc,ypgg,ykdw,flxs,cjmc,ghdw,dj,zkl,kpj,lsj,dykpj,zxlsj,lscj,cbj,zk,jlr,xywf,mll,nian,yue,ITime)" + "values(" + "'" + yymc + "'," + "'" + ghsbm + "'," + "'" + zxbm + "'," + "'" + ypbm + "'," + "'" + ypmc + "'," + "'" + ypgg + "'," + "'" + ypdw + "'," + "'" + flxs + "'," + "'" + cjmc + "'," + "'" + ghdw + "'," + "'" + dj + "'," + "'" + zkl + "'," + "'" + kpj + "'," + "'" + lsj + "'," + "'" + dykpj + "'," + "'" + zxlsj + "'," + "'" + sjcj + "'," + "'" + cbj + "'," + "'" + zk + "'," + "'" + jlr + "'," + "'" + ywf + "'," + "'" + mll + "'," + "'" + nf + "'," + "'" + yf + "'," + "'" + time + "'" + ")"; CenterBaseDAL.ExecuteSql exec = new CenterBaseDAL.ExecuteSql(); int falg = exec.run(sql); if (falg == 1) { Response.Write("<script>alert('更新成功')</script>"); Response.Write("<script>window.location.href='YPCGJCB.aspx'</script>"); Response.End(); } else { Response.Write("<script>alert('更新失败')</script>"); } } protected void btn_dr_Click(object sender, EventArgs e) { Response.Write("<script>window.open('药品销售明细查询/Improt.aspx','_blank')</script>"); } } } ``` 我用自己方法添加了一列行号,求大神指点!!
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
我在支付宝花了1分钟,查到了女朋友的开房记录!
在大数据时代下,不管你做什么都会留下蛛丝马迹,只要学会把各种软件运用到极致,捉奸简直轻而易举。今天就来给大家分享一下,什么叫大数据抓出轨。据史料证明,马爸爸年轻时曾被...
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!
作者 | Rocky0429 来源 | Python空间 大家好,我是 Rocky0429,一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱,下载的方式也同样千奇百怪,比如 BT 下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼,某度网盘几十 kb 的下载速度让我...
20道你必须要背会的微服务面试题,面试一定会被问到
写在前面: 在学习springcloud之前大家一定要先了解下,常见的面试题有那块,然后我们带着问题去学习这个微服务技术,那么就会更加理解springcloud技术。如果你已经学了springcloud,那么在准备面试的时候,一定要看看看这些面试题。 文章目录1、什么是微服务?2、微服务之间是如何通讯的?3、springcloud 与dubbo有哪些区别?4、请谈谈对SpringBoot 和S...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
2020 年,大火的 Python 和 JavaScript 是否会被取而代之?
Python 和 JavaScript 是目前最火的两大编程语言,但是2020 年,什么编程语言将会取而代之呢? 作者 |Richard Kenneth Eng 译者 |明明如月,责编 | 郭芮 出品 | CSDN(ID:CSDNnews) 以下为译文: Python 和 JavaScript 是目前最火的两大编程语言。然而,他们不可能永远屹立不倒。最终,必将像其他编程语言一...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
最全最强!世界大学计算机专业排名总结!
我正在参与CSDN200进20,希望得到您的支持,扫码续投票5次。感谢您! (为表示感谢,您投票后私信我,我把我总结的人工智能手推笔记和思维导图发送给您,感谢!) 目录 泰晤士高等教育世界大学排名 QS 世界大学排名 US News 世界大学排名 世界大学学术排名(Academic Ranking of World Universities) 泰晤士高等教育世界大学排名 中国共...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
使用 Python 和百度语音识别生成视频字幕
文章目录从视频中提取音频根据静音对音频分段使用百度语音识别获取 Access Token使用 Raw 数据进行合成生成字幕总结 从视频中提取音频 安装 moviepy pip install moviepy 相关代码: audio_file = work_path + '\\out.wav' video = VideoFileClip(video_file) video.audio.write_...
一个程序在计算机中是如何运行的?超级干货!!!
强烈声明:本文很干,请自备茶水!???? 开门见山,咱不说废话! 你有没有想过,你写的程序,是如何在计算机中运行的吗?比如我们搞Java的,肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...
【蘑菇街技术部年会】程序员与女神共舞,鼻血再次没止住。(文末内推)
蘑菇街技术部的年会,别开生面,一样全是美女。
那个在阿里养猪的工程师,5年了……
简介: 在阿里,走过1825天,没有趴下,依旧斗志满满,被称为“五年陈”。他们会被授予一枚戒指,过程就叫做“授戒仪式”。今天,咱们听听阿里的那些“五年陈”们的故事。 下一个五年,猪圈见! 我就是那个在养猪场里敲代码的工程师,一年多前我和20位工程师去了四川的猪场,出发前总架构师慷慨激昂的说:同学们,中国的养猪产业将因为我们而改变。但到了猪场,发现根本不是那么回事:要个WIFI,没有;...
为什么程序猿都不愿意去外包?
分享外包的组织架构,盈利模式,亲身经历,以及根据一些外包朋友的反馈,写了这篇文章 ,希望对正在找工作的老铁有所帮助
Java校招入职华为,半年后我跑路了
何来 我,一个双非本科弟弟,有幸在 19 届的秋招中得到前东家华为(以下简称 hw)的赏识,当时秋招签订就业协议,说是入了某 java bg,之后一系列组织架构调整原因等等让人无法理解的神操作,最终毕业前夕,被通知调往其他 bg 做嵌入式开发(纯 C 语言)。 由于已至于校招末尾,之前拿到的其他 offer 又无法再收回,一时感到无力回天,只得默默接受。 毕业后,直接入职开始了嵌入式苦旅,由于从未...
世界上有哪些代码量很少,但很牛逼很经典的算法或项目案例?
点击上方蓝字设为星标下面开始今天的学习~今天分享四个代码量很少,但很牛逼很经典的算法或项目案例。1、no code 项目地址:https://github.com/kelseyhight...
Python全栈 Linux基础之3.Linux常用命令
Linux对文件(包括目录)有很多常用命令,可以加快开发效率:ls是列出当前目录下的文件列表,选项有-a、-l、-h,还可以使用通配符;c功能是跳转目录,可以使用相对路径和绝对路径;mkdir命令创建一个新的目录,有-p选项,rm删除文件或目录,有-f、-r选项;cp用于复制文件,有-i、-r选项,tree命令可以将目录结构显示出来(树状显示),有-d选项,mv用来移动文件/目录,有-i选项;cat查看文件内容,more分屏显示文件内容,grep搜索内容;>、>>将执行结果重定向到一个文件;|用于管道输出。
立即提问