在项目开发的过程中,一般都会对表格进行分页处理,大多是情况下会在项目中配置好后台分页插件,提高效率,减轻浏览器的压力.但是有时会遇到有些数据不能直接通过分页插件操作数据库进行分页数据查询,那就需要用到前端分页.DataTables分页插件就很好用,后台通过将查询好的数据封装成具体格式的数据(json),传到前台,前台通过配置DataTables插件的配置选项,对数据进行分页显示.下面为DataTables插件的使用过程: 1.引入头文件 // 引入DataTables样式文件 <link rel…

使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat…

一.Bootstrap 响应式按钮 <div calss="col-sm-2"> <button class="btn btn-default btn-block"> </div> 表现结果:手机上全宽 桌面上2列宽 原理;btn-block 会将按钮变成全宽 但是在桌面上col-sm-2会失效 按钮被设置在2列宽 在手机上 col-sm-2失效(手机的尺寸是xs) 二.在自己的项目中整合第三方插件或功能   1.找到所有的依赖项…

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"><…

版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件 i…

前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如何引入第三方插件或者库(仅仅只是一部分,如果没有您想要的可以自行百度),那么一起来看看吧! 本章目标 学会vue-cli项目中引入jQuery 学会vue-cli项目中引入Bootstrap vue-cli项目中引入jQuery和Bootstrap 首先我们需要引入的是jQuey这个库,毕竟作为一名…

官网下载bootstrap插件放到项目中的static文件中 路由 path('blog-fullwidth/', login.fullwidth,name='fullwidth'), 前端页面引入 <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 前端获取数据 {% for v in article_obj %} <div class="blog…

PageHelper是一种常用的分页工具,按照常规方法在mybatis的配置文件中整合它: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> &l…

最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginator").jqPaginator({ totalPages: 1, visiblePages: 10, totalCounts:1, pageSize:20, currentPage: 1, first: '<li class="first"><a href=&…

maven的tomcat插件部署web项目,我简单认为分两种,一种是部署到内置tomcat,另一种是部署到安装的tomcat. 第一种部署,默认是部署在内置tomcat的8080端口,如果不需要改端口及其他设置,完全可以不用在pom中配置tomcat插件 如果需要改端口,可参考如下配置: 复制代码 org.codehaus.mojo tomcat-maven-plugin 1.1 /Demo1 8088 UTF-8 复制代码 然后执行mvn clean tomcat:deploy, 最后mvn…