首页
学习
活动
专区
圈层
工具
发布

网站搭建-django-学习成绩管理-09-查询成绩之前端实现

app,关于学生成绩管理的网站的搭建 主要功能包括: 学习成绩查询,数据统计分析 涉及前端模块: Datatables、ECharts、JQuery Part 1:目标 提前在数据库中录入一部分成绩信息...Part 2:代码逻辑 前端 获取页面中输入的条件信息(JQuery) 将前端信息传入后端(Ajax) 后端查询的结果传入前端,显示出表格(Datatables) 后端 获取前端传递的信息(json.loads...--引入datatables--> datatables/css/jquery.dataTables.css...js部分:通过Datatables模块实现表格的显示效果,只需要定义columns,即每列显示的字段,其余部分可以保持不变 Datatables功能非常强大,本文实现了排序、着色效果 $('#btn-search..."Info": true,//页脚信息 "destroy": true, //销毁已经存在的Datatables实例并替换新的选项

2.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    datatables应用程序接口API

    jQuery实例(如果是这个方式初始化Datatables,那么返回的对象不能使用api方法,不然会报方法未定义) 核心(Core) 名称 说明 ajax.reload()API 重新加载数据源获取数据...移除表格的监听事件 on()API 监听表格事件 one()API 第一次监听表格事件,然后移除监听 order()API 获得/设置表格排序 order.listener()API 在一个元素上为一个给定列添加一个排序监听...获得选中单元格的dom cell().render()DT 获得渲染过的单元格数据 cell()DT 获取表中一个单元格 cells().cache()DT 从缓存里获取选中多个单元格的数据 cells...held in DataTables for the selected cells cells().nodes()DT 获得选中的多个单元格的dom cells().render()DT 获得渲染过的多个单元格数据...sort()DT 对结果集进行排序 splice()DT 对结果集进行分割 to$()DT 转为jquery实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT

    6.1K30

    dataTable参数说明

    ,在显示大量数据的情况下强烈建议设为true,显示少量数据或者真翻页方案可以设为false,注意在设为true时无法通过函数获取所有行的dom对象—因为它们并不存在....无 dom 比较复杂的配置项,简言之就是通过一个自定义的字符串来定义DataTables里面所有组件的显示,位置和显隐....具体请详见: http://datatables.net/reference/option/dom String “lfrtip” lengthMenu 定义页面长度组件里面的选项...columns.type 通过设置列的类型让控件在排序和过滤这个列是能更好的处理这个列的数据,比如日期,货币等.具体种类很多请参考这里: http://datatables.net/reference...settings: 当前DataTables控件的setttings对象 Function 无 可以看到,DataTables的Options设置还是比较全面和丰富的,当然Options

    6K20

    【初学者指南】在ASP.NET MVC 5中创建GridView

    DataTables 使用 jQuery 数据表 以上库和插件都有自己的优缺点,其中 jQuery 数据表是个不错的选择。...它具有高度的灵活性,支持分页,即时搜索,多列排序;它也支持几乎所有可以被绑定的数据源。...例如: DOM JavaScript的 Ajax Server-side processing 我最喜欢的选项之一是, jQuery 数据表不但支持客户端搜索、分页、排序等,而且还提供了一个可以在服务器端处理的选项...安装包管理器默认是打开的,它会在你的解决方案中显示成已安装的 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...在 nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start

    8.3K90

    基于RequireJS和JQuery的模块化编程——常见问题解析

    首先需要添加jquery插件的依赖,这里用两个插件举例子——jquery-ui和jquery-datatables requirejs.config({ baseUrl: './', paths.../jquery.dataTables' }, shim:{ 'jquery-ui':['jquery'], 'jquery-dataTables':['jquery...requirejs使用jquery-ui的问题 由于requirejs加载js文件后会立即执行,如果你的jquery ui 插件需要刷新DOM页面,那么可能会导致页面的事件失效。...解决办法: 把事件绑定推迟到DOM元素渲染完后再手动触发绑定; 也可以使用事件捕获代替DOM元素的事件绑定(太麻烦了...不推荐)。...比如在DOM重构的JS模块中,执行渲染的代码下面: require("xxx").initEvents(); 常见场景: 比如我在页面中使用了jquery-steps这个UI插件,它会对页面进行重新渲染

    3.7K100

    事件绑定的几种常见方式

    在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。...1.事件绑定的几种常见方式(以click事件为例) jquery: $(selector).click(function(){...})...[注意:live事件,jQuery 1.7以后版本使用on代替live,且移动设备safari浏览器不支持live事件] 【穿插解决方案: 移动设备safari浏览器不支持live事件 方法一: 首先要给绑定...) 如果方法一对你无效,你也可以用 方法二: 同样也给绑定click事件的元素加上样式:cursor: pointer; 然后用on来绑定事件,jquery1.7后推荐用on来动态绑定事件,因为比...   唯一的区别在于delegate的性能会比live稍好一些,因为live方法需要遍历整个dom去查selector而delegate只需要监测document就够了,想要更深入了解可以自己去网上查阅下

    2.1K80

    jquery.datatables 分页功能

    在后端不管是使用什么技术,按下面API中的参数封装对象即可,分页,排序,搜索都不需要手动去维护这些信息,方便、方便、太方便!...官网链接:https://datatables.net/manual/server-side 有时候,从DOM读取数据的时间太慢或笨拙,特别是在处理数千或数百万的数据行时。...因此,您可以轻松地显示由数百万行组成的表。 当使用服务器端处理时,DataTables将在页面上的每个绘图(即分页,排序,搜索等)时向服务器发出一个Ajax请求。...} order[i]和columns[i]被发送到服务器的参数的信息数组: order[i] - 是一个定义有多少列的数组 - 即如果数组长度为1,则执行单列排序,否则正在执行多列排序。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以在jQuery请求中使用的选项,你也可以使用DataTables!

    6.9K20

    在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    通过前文,我们已经了解到使用 jQuery 插件的数据表可以很容易地实现具有搜索、排序和分页等重要功能的表格。 ?...数据表的安装 现在我们需要安装用于创建表格的 JQuery DataTables,进入Tools >> NuGet Package Manager >> Manage Nuget Packages for...安装包管理器默认是打开的,它会在你的解决方案中显示成已安装的 nugget 包,点击浏览按钮,然后搜索 JQuery DataTables 包,选择它并检查已安装了 JQuery DataTables...在 nugget 包安装成功后,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...在这之后,我们就实现了排序逻辑,排序列的信息附带在使用自定义模型绑定的模型中,使用 System.Linq.Dynamic 我们能够避免 if 和 switch 语句,我们将列迭代在用户请求的排序上,并且通过以下代码排列行

    7.5K80

    Gulp构建实例

    modernizr.custom.js 用途:提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途:基于 jQuery 的 Bootstrap 向导式插件...jquery.dataTables.js 用途:表格处理插件,包括排序分页,宽度自动处理 用法:引入后,以下结构绘制表格 例: daterange-picker.js 用途:基于 bootstrapt...的日期范围选择器 modernizr.custom.js 用途:提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途:基于 jQuery 的 Bootstrap...向导式插件 jquery.dataTables.js 用途:表格处理插件,包括排序分页,宽度自动处理 用法:引入后,以下结构绘制表格 例: /* 根据ID初始化表格,以下 .table 类用于实现单选和多选...用途:饼状图绘制工具 用法:引入文件后,按 ID 初始化 DOM 元素 传送门:rendro.github.io 例: <!

    2.4K40
    领券