DataTables 如何实现部分列的text靠左、部分列的text居中?
1.表头居中
2.部分td的text靠左排列,部分居中,部分靠右

css样式:

     <style>
        .table th {
            text-align: center;
        }
        .table tfoot tr th {
            text-align: left;
        }
        .align_right {
            text-align: right;
        }
        .align_center {
            text-align: center;
        }
    </style>

dt渲染表格,部分代码:

 columns: [
                {
                    "name": "areaName", "data": function (data) {
                    return '<span class="align_right">'+$.xfj_formatEmptyString(data.areaName,'--') + '</span>';
                }
                },
                {
                    "name": "employees", "data": function (data) {
                        return '<span class="align_center">'+data.employees+'</span>';
                }
                }
            ]

7个回答

 span默认行内元素,设置text-align没用,要设置为块级元素才行
.align_right,.align_center{display:block}

或者span改为div

weixin_36146275
weixin_316529 今天回来试了一下,可行。谢谢,采纳你的答案了。
接近 2 年之前 回复

每一个对应加着:align:(left,center,right),

weixin_36146275
weixin_316529 能图文描述一下吗?
接近 2 年之前 回复

请问是要在页面显示吗?

weixin_36146275
weixin_316529 是的
接近 2 年之前 回复

靠左的设置相同的class,靠右的也设置相同的class,表头都是th 然后css样式控制就好了

td 页面设置相应的 样式:align:(left,center,right),

通过CSS选择器实现 :
如控制第二列

tr>td:nth-child(2){
            text-align: right;
}

如果jq那更简单
$('tr').find('td:eq(1)').css('text-align','right');

写行内样式

 <span class="align_center"></span>';
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
DataTables怎么给某一列加上click事件
DataTables的数据是动态生成的, $('#example tbody').on('click','tr', function () { var name = $('td', this).eq(3).text(); alert(name); } ); 这种是点击一行的任何一列都会弹出name值,我现在情况是,想点击每一行的第三列都会弹出一个框,点击其他列不会有反应求指教啊
在用jquery datatables插件的buttons扩展时,设置colvis属性问题
前端框架bootstrap3,使用mvc5 在使用jquery datatables插件的buttons扩展过程中,因为需要设置隐藏显示列的问题,使用了colvis属性, 初始化如下: buttons: [ { extend: 'colvis', text: '显示/隐藏列', columns: ':not(:last-child)', postfixButtons: [{ extend: 'colvisRestore', text: '重置' }, ] }, ] js文件导入顺序如下: jquery-3.0.0.min.js bootstrap.min.js jquery.dataTables.js dataTables.bootstrap.js dataTables.buttons.js buttons.bootstrap.js buttons.colVis.js css文件如下: bootstrap.css dataTables.bootstrap.css buttons.bootstrap.css 遇到的问题:页面生成的“显示/隐藏列”按钮,点击该按钮后弹出一下拉菜单,(内容为列集合,点击可进行隐藏或显示列),此菜单无法关闭,只能重新刷新页面才能关闭,请问怎么解决? 官网的例子:https://datatables.net/extensions/buttons/examples/column_visibility/simple.html 用的谷歌浏览器、火狐浏览器都有此问题,但官网例子则没有该现象。 请问我还需要进行什么设置?盼得到解答,谢谢!
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控件选择重新查询数据.
jquery datatable 如何改变字体大小
各位好:目前在使用datatable 插件展示数据,但是发现默认的字体很大,没找到调整的地方 各位知道如何调整吗? 谢谢! 引入的脚本 ``` <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="dataTables/css/dataTables.jqueryui.css" /> <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="dataTables/js/dataTables.jqueryui.js"></script> ``` 效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201606/18/1466264123_443089.jpg)
在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> ``麻烦各位大佬帮下忙
datatables中删除数据问题,最后一页只有一条数据删除跳转前一页
datatable显示数据时,当我在最后一页只有一条数据时删除它,想让它跳转到前一页怎么处理。或者一页有10条数据,添加一条数据之后跳转到第二页怎么处理。比如 一共有31条数据,那么分页为4页,第四页只有一条数据,当我把它删除时,则程序应该 跳到第三页显示,但是其仍然停留在没有第四页的那儿,这个怎么处理 ![![图片说明](https://img-ask.csdn.net/upload/201801/19/1516349274_490491.png)图片说明](https://img-ask.csdn.net/upload/201801/19/1516349260_525665.png) function getData(){ var id = 0; var cycle=$("#cycleStatus").val(); var flag = $("#flag").val(); var table = $('#userList').DataTable({ "destroy": true, //可以重新初始化,用于搜索 "lengthChange": false, "ordering": false, //排序 "info": true, // "autoWidth": true, //宽度自动 "paging": true, //分页 "searching": false, //全局搜索关闭 "processing": true, //开启显示‘正在加载.../processing’ "serverSide":true, //true代表后台处理分页,false代表前台处理分页 "ajax" : { url:"${pageContext.request.contextPath}/listAll", type:"get", data:{ "sendcycle":cycle, "keyWord":flag } }, //参数显示 "columns": [ {"data": null,'sClass':"text-center","width":"6%"}, /*{"data": "id", 'sClass': "text-center","width":"6%"},*/ {"data": "sourcename", 'sClass': "text-center","width":"8%",}, {"data": "purposename", 'sClass': "text-center","width":"8%",}, {"data": "needname", 'sClass': "text-center","width":"8%"}, {"data": "needman", 'sClass': "text-center","width":"8%",}, {"data": "sendcycle", 'sClass': "text-center","width":"8%", "render": function ( data, type, full, meta ) { var str=""; if(data==0){ str="天"; } if(data ==1){ str ="月"; } if(data ==2){ str="年"; } return str; } }, {"data": "lasttime", 'sClass': "text-center","width":"8%", "render": function ( data, type, full, meta ) { var str=""; if(full.sendcycle==0){ str=data+"天"; } if(full.sendcycle==1){ str=data+"月"; } if(full.sendcycle==2){ str=data+"年"; } return str; } }, {"data": "createtime", 'sClass': "text-center","width":"18%",}, {"data": "createman", 'sClass': "text-center","width":"8%",}, {"data":"id" , 'sClass': "text-center","width":"16%", "render": function (data, type, full, meta ) { var str = ""; <shiro:hasPermission name="update"> str += "<font color='blue' data-toggle='modal' data-target='#accept' onclick=updateUserId(" + data +");>[更新]</font>&nbsp;"; </shiro:hasPermission> <shiro:hasPermission name="delete"> str += "<font color='blue' data-toggle='modal' data-target='#accept' onclick=deleteUserId(" + data +");>[删除]</font>&nbsp;"; </shiro:hasPermission> /*下发地市*/ str += "<font color='blue' data-toggle='modal' data-target='#accept' onclick=sendAreaId(" + data +");>[下发地市]</font>&nbsp;"; /*var time = full.createtime.split("-");*/ /*时间戳*/ var time =Date.parse(new Date(full.createtime)); var now =Date.parse(new Date()); if(full.sendcycle==0){ var newDate=new Date(); var day=full.lasttime; /*过期时间*/ newDate.setTime(time+1000*3600*24*day); var date2=formatDate(newDate); var date2Stamp=Date.parse(new Date(date2)); if(date2Stamp<now){ return str+="<font color='red' data-toggle='modal' data-target='#accept';>[已过期]</font>&nbsp;"; }else{ return str+="<font color='green' data-toggle='modal' data-target='#accept';>[未过期]</font>&nbsp;"; } } if(full.sendcycle==1){ var newDate=new Date(full.createtime); var month=full.lasttime; /*不加会直接1+5=15*/ newDate.setMonth(Number(newDate.getMonth())+Number(month)); var date2=formatDate(newDate); var date2Stamp=Date.parse(new Date(date2)); if(date2Stamp<now){ return str+="<font color='red' data-toggle='modal' data-target='#accept';>[已过期]</font>&nbsp;"; }else{ return str+="<font color='green' data-toggle='modal' data-target='#accept';>[未过期]</font>&nbsp;"; } } if(full.sendcycle==2){ var newDate=new Date(full.createtime); var year=full.lasttime; newDate.setFullYear(Number(newDate.getFullYear())+Number(year)); var date2=formatDate(newDate); var date2Stamp=Date.parse(new Date(date2)); if(date2Stamp<now){ return str+="<font color='red' data-toggle='modal' data-target='#accept';>[已过期]</font>&nbsp;"; }else{ return str+="<font color='green' data-toggle='modal' data-target='#accept';>[未过期]</font>&nbsp;"; } } return str; } } ], /*"columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']],*/ /*设置操作之后仍在当前页*/ bStateSave:true, //是否开启主题 "bJQueryUI": true, "oLanguage": { // 语言设置 "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sZeroRecords": "没有检索到数据", "sSearch": "检索:", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } } }); /*设置id自增长1*/ table.on('draw.dt',function() { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { //i 从0开始,所以这里先加1 i = i+1; //服务器模式下获取分页信息,使用 DT 提供的 API 直接获取分页信息 var page = table.page.info(); //当前第几页,从0开始 var pageno = page.page; //每页数据 var length = page.length; //行号等于 页数*每页数据长度+行号 var columnIndex = (i+pageno*length); cell.innerHTML = columnIndex; }); }); /*start = $("#targetTable").dataTable().fnSettings()._iDisplayStart; total = $("#targetTable").dataTable().fnSettings().fnRecordsDisplay(); window.location.reload(); if ((total - start) == 1) { if (start > 0) { $("#sorting-advanced").dataTable().fnPageChange('previous', true); } }*/ } ``` ```
这个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> ```
fnReloadAjax的刷新问题
页面我是用datatables做的。标签列表页有一个刷新按钮。当我同时打开多个标签列表页后,添加了新的标签后,再刷新标签列表页,只有最后一次打开的标签列表页的刷新按钮有效(即点击刷新按钮,最后一次打开的标签列表页显示刚才新添加的标签,之前打开的点击刷新按钮,都不显示)。以下是我的问题的详细描述图片![图片说明](https://img-ask.csdn.net/upload/201610/17/1476689400_82815.png) 这是我的刷新按钮的代码 ``` buttons: [ { text: '刷新', className: "btn btn-default", action: function (e, dt, node, config) { t.fnReloadAjax(); } } ], ``` 求大神给我指导下,这到底是为什么啊,也不是刷新不起作用。
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"]; }
询问个问题,前端的问题
``` function initTableData(){ oTable = $('#contentTable').DataTable( { dom: 'Bfrtip', "buttons": [ {text: "全部导出", extend: 'excel', exportOptions: { modifier: { page: 'all' }, //format: { // body: function(data, column, row, node){ // https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html // return data + ""; // } // } columns: range(12, 1) }, }, {text: "导出选中", extend: 'excel', exportOptions: { modifier: { selected: true }, columns: range(12, 1) } }, { text: '全选', action: function (e, dt) { oTable.rows().select(); } }, { text: '全不选', action: function () { oTable.rows().deselect(); } }, { text: '短信', action: function () { //点击短信,弹出窗口 } }, { text: '区域筛选', action: function () { // alert(132); window.open("${ctx}/map/search"); } } ] ``` 如上,我点击短信,function中如何写js,才能够弹出一个框,谢谢。 想要弹出的是下面的一段div代码: ``` <div class="modal fade" id="message" role="dialog" aria-labelledby="clue-detail" data-toggle="popover"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">发送短信</h4> </div> <div class="modal-body"> <form> <div style='width:90%;margin:0 auto;'> <span>手机号:</span> <input class='form-control phone' style='width:85%' pattern="^1[345678][0-9]{9}$" required /> </div> <div style='width:90%;margin:0 auto;margin-top: 15px;'> <span style='vertical-align: top;'> 内容:</span> <textarea class='form-control' id='message-content'maxlength="177" style='width:85%;min-height:100px;' required></textarea> <span style='vertical-align: top;'>    </span> <span style='color:red;'> *提示:短信内容建议在59字以内,最多不能大于177字</span> <br/> <span style='vertical-align: top;'>    </span> <span style=''> 当前字符数:<span class='text-cont'>0</span></span> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <input type="button" data-dismiss="modal" id='send' class="btn btn-primary" value='发送'> </div> </form> </div> </div> </div> </div> ```
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>
在后台如何获取Repeater控件中绑定的值 如<%#Eval("tiid") %>的值
``` <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="AddTestContent.aspx.cs" Inherits="ZaiXianKaoShi.AddTestContent" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <form runat="server"> <%--只能在详情中添加试题内容(此页面已得到考试编号)--%> <%--考试编号:--%> <%--题库id: 分值:--%> <div class="portlet box purple"> <div class="portlet-title"> <div class="caption"><i class="icon-cogs"></i>题目信息显示</div> </div> <div class="portlet-body"> <div id="sample_3_wrapper" class="dataTables_wrapper form-inline" role="grid"> <div class="row-fluid"> <div class="span6"> <div class="dataTables_length" id="sample_3_length"> <label> <div id="s2id_autogen3" class="select2-container m-wrap small"> <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <abbr class="select2-search-choice-close" style="display:none;"></abbr> <div> <b></b> </div> </a> </div> <select tabindex="-1" class="m-wrap small select2-offscreen" aria-controls="sample_3" size="1" name="sample_3_length"> <option selected="selected" value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="-1">All</option> </select> 每页显示行数 </label> </div> </div> <div class="span6"><div id="Div2" class="dataTables_filter"><label>搜索: <input class="m-wrap small" aria-controls="sample_2" type="text"></label></div></div> </div> <table aria-describedby="sample_3_info" class="table table-striped table-bordered table-hover dataTable" id="sample_3"> <asp:Repeater id="Repeater2" runat="server"> <HeaderTemplate> <tr> <th>题库编号</th> <th>科目编号</th> <th>试题内容</th> <th>待选答案</th> <th>正确答案</th> <%--<th>分值</th>--%> <th>添加到试卷</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Eval("tiid") %></td> <td><%#Eval("subid") %></td> <td><%#Eval("content") %></td> <td><%#Eval("answerS") %></td> <td><%#Eval("answer") %></td> <%--<td><input type="text" name="fen" id="fen" style="width:20px; height:12px" runat="server" value="10" />分</td>--%> <td> <%--<a href="AddTestContent.aspx?tid=<%#Eval("tiid") %>&id=<%=Request["testid"] %>&subid=<%=Request["subid"] %>">添加</a>--%> <input type="submit" value="添加" /> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <div class="row-fluid"> <div class="span6"> <div id="sample_3_info" class="dataTables_info" runat="server" style="color:#f00"> </div></div><div class="span6"> <div class="dataTables_paginate paging_bootstrap pagination"> <ul> <li class="prev disabled"><a href="#">← <span class="hidden-480"> Prev </span></a></li> <li class="active"> <a href="#">1</a></li><li><a href="#">2</a></li> <li><a href="#">3</a></li><li class="next"> <a href="#"><span class="hidden-480">Next</span> → </a> </li></ul></div></div></div></div> </div> </div> </form> </asp:Content> ```
jquery datatable 垂直滚动问题求教
//datatable function cover_typetable () { if (!jQuery().dataTable) { return; } data_table=$('#style_pro_table').dataTable({ "sDom" : "<'row'<'col-md-6 col-sm-12'l><'col-md-12 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", "sAjaxSource":"coverType/findNotinCoverType.do", "bFilter":false, "bLengthChange":true,//取消显示每页条数 "bProcessing": true, "bServerSide": true,//true依据后台排序 "bStateSave": true, "bJQueryUI":false,//是否用jquery样式 "bScrollInfinite":true, //"sScrollY":'500px', "iScrollLoadGap":2, "bAutoWidth":true, //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里就是垂直滚动了! //"sScrollY":"100%", //延迟加载 //"iDeferLoading":5, "sZeroRecords": "没有检索到数据", "aoColumns": [ { 'mDataProp':'coverSmallImage',"bSortable": false, "mRender": function ( data, type, row ) { return '<div style="text-align:right;"><img style="height:80px; width="90px;" src="http://125.oss-cn-beijing.aliyuncs.com/'+data+'"></div>'; } }, { 'mDataProp':'productName',"bSortable": false}, { 'mDataProp':'productPrice',"bSortable": false}, { 'mDataProp':'salePrice',"bSortable": false } ], "aLengthMenu": [ [5, 10, 15, 20,50,100, -1], [5, 10, 15, 20,50,100, "全部"] // change per page values here ], "bRetrieve": true, "iDisplayLength": 10, "sPaginationType": "bootstrap", "oLanguage": { "sProcessing": '<i class="fa fa-coffee"></i>&nbsp;正在加载中......', "sEmptyTable" : "没有查询到数据", "sZeroRecords": "没有检索到数据", "sLengthMenu": "每页展示 _MENU_ 条 ", 'sInfoEmpty': '当前显示 0到0条,共0条记录', "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页 ", "sNext": "下一页", "sLast": "末页", } }, "fnInitComplete": function() { this.fnAdjustColumnSizing(true); } }); jQuery('#style_pro_table .dataTables_filter input').addClass("form-control input-small"); // modify table search input jQuery('#style_pro_table .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown } ![图片说明](https://img-ask.csdn.net/upload/201504/20/1429541223_528312.png) ![图片说明](https://img-ask.csdn.net/upload/201504/20/1429541235_116837.png) 当我开启垂直滚动的时候我的表格标题就会被撑开-我尝试过很多办法-写在js里不行-写在页面里也不行-样式也不管用-总之只要是一打开垂直滚动-就会被撑开-求大牛
springboot+thymeleaf模版引入静态资源不对问题
我写了一个方法LoginController.java没有任何逻辑直接跳转页面,然后页面样式、js、图片都没有引用进来;下面上下图 先说下问题 页面使用了th标签引入了css/js/图片这些静态资源, 自地址栏直接访问没有问题可以看到 但是我访问http://localhost:8080/users/login(通过方法跳转到页面)出现如下问题 在请求静态资源的时候默认的给我加上了/users,导致资源请求不到,请各位大侠帮忙看看是什么原因, 目录结构: controller代码: package com.dfyz.controller.admin; import com.dfyz.Message; import com.dfyz.entity.Member; import com.dfyz.service.MemberService; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; /** * Created by Administrator on 2017/11/16. */ @Controller @RequestMapping("/users") public class LoginController { @Resource(name = "memberService") private MemberService memberService; @RequestMapping("/login") public String login(String userName, String password, ModelMap map){ Member member = memberService.find(1L); // if(member.getPassword().equals(password.trim())){ // return Message.success("成功"); // } // return Message.error("请核对用户名和密码"); map.addAttribute("member",member); return "admin/index"; } } 页面代码:(将body中的内容删掉了) ``` <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>xxx专用</title> <meta name="description" content="估计只有你一个人用了"/> <meta name="keywords" content="index"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="renderer" content="webkit"/> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="icon" type="image/png" th:href="@{assets/i/favicon-bak.png}" /> <link rel="apple-touch-icon-precomposed" th:href="@{assets/i/app-icon72x72@2x.png}" /> <meta name="apple-mobile-web-app-title" content="Amaze UI" /> <script th:src="@{assets/js/echarts.min.js}"></script> <link rel="stylesheet" th:href="@{assets/css/amazeui.min.css}" /> <link rel="stylesheet" th:href="@{assets/css/amazeui.datatables.min.css}" /> <link rel="stylesheet" th:href="@{assets/css/app.css}" /> <script th:src="@{assets/js/jquery.min.js}"></script> </head> <body data-type="index"> </body> </html> ``` 配置文件: ``` # 端口 #server.port=80 # 自动扫描的包前缀 entitymanager.packagesToScan= com.dfyz ## 自动扫描的包前缀 spring.datasource.url = jdbc:mysql://localhost:3306/test spring.datasource.username = root spring.datasource.password = root spring.datasource.driverClassName = com.mysql.jdbc.Driver spring.datasource.maxActive=500 # Specify the DBMS spring.jpa.database = MYSQL # Show or not log for each sql query spring.jpa.show-sql = true # Hibernate ddl auto (create, create-drop, update) spring.jpa.properties.hibernate.hbm2ddl.auto=update # spring.jpa.hibernate.ddl-auto = update # Naming strategy spring.jpa.hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy # stripped before adding them to the entity manager) spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect spring.jpa.properties.hibernate.current_session_context_class=org.springframework.orm.hibernate4.SpringSessionContext ######################################################## ###THYMELEAF (ThymeleafAutoConfiguration) ######################################################## #spring.thymeleaf.prefix=classpath:/templates/ #spring.thymeleaf.suffix=.html #spring.thymeleaf.mode=HTML5 #spring.thymeleaf.encoding=UTF-8 # ;charset=<encoding> is added #spring.thymeleaf.content-type=text/html # set to false for hot refresh spring.thymeleaf.mode=LEGACYHTML5 spring.thymeleaf.cache=false # 静态文件请求匹配方式 spring.mvc.static-path-pattern=/** # 修改默认的静态寻址资源目录 spring.resources.static-locations = classpath:/templates/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ #热部署生效 spring.devtools.restart.enabled=true cbs.imagesPath=file:/E:/imagesuuuu/ ```
简单的jQuery分页插件封装怎么进行?
在学习jQuery插件封装,依葫芦画瓢封装了一个简单的表格和分页,页面能初始化生成表格和分页,但生成后怎么能让分页插件执行分页和表格刷新工作就不晓得怎么继续了,希望熟悉jQuery插件开发的人能帮忙补齐一下。 预期的用法是,给插件传入一个后台的请求路径“"http://127.0.0.1:8080/account/findListForPage"”,通过路径返回一个分页json对象(当前页、总页、页面表格数据),通过解析json生成表格和分页部分: [code="js"] function reloadTable(code){ $("#acTableGrid").grid({ //content:$(".widget-body"), type: "POST", url:"${ctx}/account/findListForPage", column:[{"id":"编号","state":"状态","type":"类型","phone":"电话"}], page:true, param:{"pageCode":code}, }) } [/code] [code="js"] (function($) { // plugin definition var GridTable = function(ele, options) { this.$element = ele, this.defaults = { page : false, type : "GET", url : undefined, param : undefined, pageData : undefined }, this.opts = $.extend({}, this.defaults, options) if(this.opts.url!=undefined&&this.opts.url!=""){ var dataObject = $.ajax({ async: false, type : this.opts.type, url : this.opts.url, data : this.opts.param, success : function(data) { return data } }); } this.opts.pageData = dataObject.responseJSON; } GridTable.prototype = { buildBody : function() { this.$element.empty(); this.$element.addClass("table table-striped table-bordered table-hover"); if (this.opts.column.length > 0) { var thead = $("<thead>"); var tr = $("<tr>").appendTo(thead); $.each(this.opts.column[0], function(name, value) { tr.append("<th>" + value + "</th>"); }); this.$element.append(thead) } var record = this.opts.pageData.data; if (record != undefined && record.length > 0) { var tbody = $("<tbody>"); for (i = 0; i < record.length; i++) { columnData = record[i]; var tr = $("<tr>"); $.each(this.opts.column[0], function(name, value) { tr.append("<td>" + columnData[name] + "</td>"); }); tbody.append(tr); } return this.$element.append(tbody) } }, buildPagin: function(){ var pageData = this.opts.pageData; if (this.opts.page) { var page = '<div class="dt-row dt-bottom-row">'; page = page + ' <input type="hidden" id="url" name="url" value="' + this.opts.url + '">'; page = page + ' <input type="hidden" id="pageSize" name="pageSize" value="' + pageData.pageSize + '">'; page = page + ' <input type="hidden" id="pageCode" name="pageCode" value="' + pageData.pageCode + '">'; page = page + ' <input type="hidden" id="totalPageNum" name="totalPageNum" value="' + pageData.totalPageNum + '">'; page = page + ' <div class="row">'; page = page + ' <div class="col-sm-6">'; page = page + ' <div class="dataTables_info" id="dt_basic_info">第' + pageData.pageCode + '/' + pageData.totalPageNum + '页 共' + pageData.totalRecords + '条记录</div>'; page = page + ' </div>'; page = page + ' <div class="col-sm-6 text-right">'; page = page + ' <div class="dataTables_paginate paging_bootstrap_full">'; page = page + ' <ul class="pagination">'; page = page + ' <li class="first"><a href="javascript:void(0)">首页</a></li>'; page = page + ' <li class="prev"><a href="javascript:void(0)">上一页</a></li>'; page = page + ' <li class="next"><a href="javascript:void(0)">下一页</a></li>'; page = page + ' <li class="last"><a href="javascript:void(0)">末尾页</a></li>'; page = page + ' </ul>'; page = page + ' </div>'; page = page + ' </div>'; page = page + ' </div>'; page = page + ' </div>'; this.$element.after(page); }, } $.fn.grid = function(options) { var grid = new GridTable(this, options); grid.buildBody(); grid.buildPagin(); return grid; }; })(jQuery); [/code] 生成的HTML结构如下: [code="html"] //表格数据部分 <table id="acTableGrid" class="table table-striped table-bordered table-hover"><thead><tr><th>编号</th><th>状态</th><th>类型</th><th>电话</th><th>账号</th><th>注册时间</th><th>Email</th></tr></thead><tbody><tr><td>464690392101687300</td><td>null</td><td>0</td><td>null</td><td>15828245173</td><td>1399625797000</td><td>null</td></tr><tr><td>465404813799198700</td><td>null</td><td>0</td><td>null</td><td>313057544@qq.com</td><td>1399796129000</td><td>null</td></tr><tr><td>465442761785610240</td><td>null</td><td>0</td><td>null</td><td>15828245273</td><td>1399805176000</td><td>null</td></tr></tbody></table> //分页部分 <div class="dt-row dt-bottom-row"> <input type="hidden" id="url" name="url" value="/kmp/account/findListForPage"> <input type="hidden" id="pageSize" name="pageSize" value="3"> <input type="hidden" id="pageCode" name="pageCode" value="1"> <input type="hidden" id="totalPageNum" name="totalPageNum" value="3"> <div class="row"> <div class="col-sm-6"> <div class="dataTables_info" id="dt_basic_info">第1/3页 共7条记录</div> </div> <div class="col-sm-6 text-right"> <div class="dataTables_paginate paging_bootstrap_full"> <ul class="pagination"> <li class="first"><a href="javascript:void(0)">首页</a></li> <li class="prev"><a href="javascript:void(0)">上一页</a></li> <li class="next"><a href="javascript:void(0)">下一页</a></li> <li class="last"><a href="javascript:void(0)">末尾页</a></li> </ul> </div> </div> </div> </div> [/code]
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
此博客仅为我业余记录文章所用,发布到此,仅供网友阅读参考,如有侵权,请通知我,我会删掉。 补充 有不少读者留言说本文章没有用,因为天气预报直接打开手机就可以收到了,为何要多此一举发送到邮箱呢!!!那我在这里只能说:因为你没用,所以你没用!!! 这里主要介绍的是思路,不是天气预报!不是天气预报!!不是天气预报!!!天气预报只是用于举例。请各位不要再刚了!!! 下面是我会用到的两个场景: 每日下
死磕YOLO系列,YOLOv1 的大脑、躯干和手脚
YOLO 是我非常喜欢的目标检测算法,堪称工业级的目标检测,能够达到实时的要求,它帮我解决了许多实际问题。 这就是 YOLO 的目标检测效果。它定位了图像中物体的位置,当然,也能预测物体的类别。 之前我有写博文介绍过它,但是每次重新读它的论文,我都有新的收获,为此我准备写一个系列的文章来详尽分析它。这是第一篇,从它的起始 YOLOv1 讲起。 YOLOv1 的论文地址:https://www.c
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的 回答 - Bravo Yeung,获得该问题下回答中得最高赞(236赞和1枚专业勋章),对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalk
20行Python代码爬取王者荣耀全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片
简明易理解的@SpringBootApplication注解源码解析(包含面试提问)
欢迎关注文章系列 ,关注我 《提升能力,涨薪可待》 《面试知识,工作可待》 《实战演练,拒绝996》 欢迎关注我博客,原创技术文章第一时间推出 也欢迎关注公 众 号【Ccww笔记】,同时推出 如果此文对你有帮助、喜欢的话,那就点个赞呗,点个关注呗! 《提升能力,涨薪可待篇》- @SpringBootApplication注解源码解析 一、@SpringBootApplication 的作用是什
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给
Python语言高频重点汇总
Python语言高频重点汇总 GitHub面试宝典仓库——点这里跳转 文章目录Python语言高频重点汇总**GitHub面试宝典仓库——点这里跳转**1. 函数-传参2. 元类3. @staticmethod和@classmethod两个装饰器4. 类属性和实例属性5. Python的自省6. 列表、集合、字典推导式7. Python中单下划线和双下划线8. 格式化字符串中的%和format9.
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外
ES6基础-ES6的扩展
进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展。 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符串的扩展: 模板字符串,部分新的方法,新的unicode表示和遍历方法: 部分新的字符串方法 padStart,padEnd,repeat,startsWith,endsWith,includes 字
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 前前言 为啥今天有个前前言呢? 因为你们的丙丙啊,昨天有牌面了哟,直接被微信官方推荐,知乎推荐,也就仅仅是还行吧(心里乐开花)
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
Python爬虫精简步骤1 获取数据
爬虫的工作分为四步: 1.获取数据。爬虫程序会根据我们提供的网址,向服务器发起请求,然后返回数据。 2.解析数据。爬虫程序会把服务器返回的数据解析成我们能读懂的格式。 3.提取数据。爬虫程序再从中提取出我们需要的数据。 4.储存数据。爬虫程序把这些有用的数据保存起来,便于你日后的使用和分析。 这一篇的内容就是:获取数据。 首先,我们将会利用一个强大的库——requests来获取数据。 在电脑上安装
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 更多有趣分析教程,扫描下方二维码关注vx公号「裸睡的猪」 即可查看! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布
web前端javascript+jquery知识点总结
Javascript javascript 在前端网页中占有非常重要的地位,可以用于验证表单,制作特效等功能,它是一种描述语言,也是一种基于对象(Object)和事件驱动并具有安全性的脚本语言 ,语法同java类似,是一种解释性语言,边执行边解释。 JavaScript的组成: ECMAScipt 用于描述: 语法,变量和数据类型,运算符,逻辑控制语句,关键字保留字,对象。 浏览器对象模型(Br
Qt实践录:开篇
本系列文章介绍笔者的Qt实践之路。 背景 笔者首次接触 Qt 大约是十多年前,当时试用了 Qt ,觉得不如 MFC 好用。现在 Qt 的 API、文档等都比较完善,在年初决定重新拾起,正所谓技多不压身,将 Qt 当为一种谋生工具亦未尝不可。利用春节假期的集中时间,快速专攻一下。 本系列名为“Qt实践”,故不是教程,笔者对 Qt 的定位是“使用”,可以帮助快速编写日常的工具,如串口、网络等。所以不
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。   再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。   下文是原回答,希望能对你能有所启发。   如果我说,这个世界上人真的分三六九等,
为什么听过很多道理,依然过不好这一生?
记录学习笔记是一个重要的习惯,不希望学习过的东西成为过眼云烟。做总结的同时也是一次复盘思考的过程。 本文是根据阅读得到 App上《万维钢·精英日课》部分文章后所做的一点笔记和思考。学习是一个系统的过程,思维模型的建立需要相对完整的学习和思考过程。以下观点是在碎片化阅读后总结的一点心得总结。
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计
一条链接即可让黑客跟踪你的位置! | Seeker工具使用
搬运自:冰崖的部落阁(icecliffsnet) 严正声明:本文仅限于技术讨论,严禁用于其他用途。 请遵守相对应法律规则,禁止用作违法途径,出事后果自负! 上次写的防社工文章里边提到的gps定位信息(如何防止自己被社工或人肉) 除了主动收集他人位置信息以外,我们还可以进行被动收集 (没有技术含量) Seeker作为一款高精度地理位置跟踪工具,同时也是社交工程学(社会工程学)爱好者...
作为程序员的我,大学四年一直自学,全靠这些实用工具和学习网站!
我本人因为高中沉迷于爱情,导致学业荒废,后来高考,毫无疑问进入了一所普普通通的大学,实在惭愧...... 我又是那么好强,现在学历不行,没办法改变的事情了,所以,进入大学开始,我就下定决心,一定要让自己掌握更多的技能,尤其选择了计算机这个行业,一定要多学习技术。 在进入大学学习不久后,我就认清了一个现实:我这个大学的整体教学质量和学习风气,真的一言难尽,懂的人自然知道怎么回事? 怎么办?我该如何更好的提升
前端JS初级面试题二 (。•ˇ‸ˇ•。)老铁们!快来瞧瞧自己都会了么
1. 传统事件绑定和符合W3C标准的事件绑定有什么区别? 传统事件绑定 &lt;div onclick=""&gt;123&lt;/div&gt; div1.onclick = function(){}; &lt;button onmouseover=""&gt;&lt;/button&gt; 注意: 如果给同一个元素绑定了两次或多次相同类型的事件,那么后面的绑定会覆盖前面的绑定 (不支持DOM事...
Python学习笔记(语法篇)
本篇博客大部分内容摘自埃里克·马瑟斯所著的《Python编程:从入门到实战》(入门类书籍),采用举例的方式进行知识点提要 关于Python学习书籍推荐文章 《学习Python必备的8本书》 Python语法特点: 通过缩进进行语句组织 不需要变量或参数的声明 冒号 1 变量和简单数据结构 1.1 变量命名 只能包含字母、数字和下划线,且不能以数字打头。 1.2 字符串 在Python中,用引号...
[Pyhon疫情大数据分析] 一.腾讯实时数据爬取、Matplotlib和Seaborn可视化分析全国各地区、某省各城市、新增趋势
思来想去,虽然很忙,但还是挤时间针对这次肺炎疫情写个Python大数据分析系列博客,包括网络爬虫、可视化分析、GIS地图显示、情感分析、舆情分析、主题挖掘、威胁情报溯源、知识图谱、预测预警及AI和NLP应用等。第一篇文章将分享腾讯疫情实时数据抓取,获取全国各地和贵州省各地区的实时数据,并将数据存储至本地,最后调用Maplotlib和Seaborn绘制中国各地区、贵州省各城市、新增人数的图形。希望这篇可视化分析文章对您有所帮助!
小白也会用的情人节表白神器
鉴于情人节女朋友总说直男,上网找了个模板,改了一下,发现效果还不错。然后又录了一个视频,发现凑合,能用。现在免费分享给程序员,去表白去吧。​​​​​​。当然比较low因为考研没时间优化,懒着优化了。 先看一下效果吧:页面太多了,这里我只放几个页面里面有音乐,还凑合不是太单调。 所有页面最后的合成效果: 接下来教大家如何使用: 新建文件夹:love 然后建立这几个...
论如何用python发qq消息轰炸虐狗好友
因为我的某个好友在情人节的时候秀恩爱,所以我灵光一闪制作了qq消息轰炸并记录了下来。 首先 我的编程环境是: windows 10系统 python3.6 记得要下载win32 pip install win32 思路介绍 其实也非常简单 将要发出去的句子储存在列表中 然后用随机模块调用 将随机出来的元素储存在剪贴板中 连接QQ 找到指定对象 疯狂输出 怎么样,简单吧 开始打代码吧 imp...
相关热词 c#时间格式化 不带- c#替换字符串中指定位置 c# rdlc 动态报表 c# 获取txt编码格式 c#事件主动调用 c#抽象工厂模式 c# 如何添加类注释 c# static块 c#处理浮点数 c# 生成字母数字随机数
立即提问