系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3.2 Django:2.1.4 Python:3.6.0
Part 1:目标
数据库
查询动图
查询静图
Part 2:代码逻辑
Part 3:前端代码
<div id="table-show" class="container-fluid rounded" style="width: 95%;margin-top: 30px">
<table width="100%" class="table table-condensed table-hover" id="table-query" style="table-layout:auto">
<thead class="thead-light">
<tr style="text-align: center;font-size:12px" id="tr-th">
<th>班级</th>
<th>学生姓名</th>
<th>第几次模拟考</th>
<th>课程名称</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- 引入自定义js -->
<script src="{% static 'self-js/sg_first_page.js' %}" type="text/javascript"></script>
代码截图
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>成绩查询</title>
<style>
.table-center{
text-align: center;
vertical-align: middle;
white-space: wrap;
}
</style>
<!--引入jquery-->
<script src="{% static 'js/jquery-3.3.1.min.js' %}" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<!--引入font_awesome-->
<link rel="stylesheet" type="text/css" href="{% static 'font_awesome/css/font-awesome.min.css' %}">
<!--引入bootstrap-->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.js'%}" type="text/javascript"></script>
<script src="{% static 'bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript"></script>
<!--引入datatables-->
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/jquery.dataTables.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/buttons.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/select.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/dataTables.checkboxes.css' %}">
<!-- <script src="{% static 'datatables/js/jquery.js'%}" type="text/javascript"></script> -->
<script src="{% static 'datatables/js/jquery.dataTables.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/dataTables.bootstrap4.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/dataTables.responsive.min.js'%}" type="text/javascript"></script>
<!-- <script src="{% static 'datatables/js/pdfmake.min.js'%}" type="text/javascript"></script> -->
<script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/dataTables.select.min.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/dataTables.checkboxes.min.js'%}" type="text/javascript"></script>
<!-- <script src="{% static 'datatables/js/buttons.bootstrap4.min.js'%}" type="text/javascript"></script> -->
<script src="{% static 'datatables/js/dataTables.buttons.min.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/buttons.html5.min.js'%}" type="text/javascript"></script>
<script src="{% static 'datatables/js/jszip.min.js'%}" type="text/javascript"></script>
<!-- <script src="{% static 'datatables/js/pdfmake.min.js'%}" type="text/javascript"></script> -->
<script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript"></script>
<!--引入echarts-->
<script src="{% static 'js/echarts.js'%}" type="text/javascript"></script>
<!--引入editable-select-->
<link rel="stylesheet" type="text/css" href="{% static 'editable-select/jquery-editable-select.css' %}">
<script src="{% static 'editable-select/jquery-editable-select.js'%}" type="text/javascript"></script>
</head>
代码截图
$('#btn-search').click(function(){
showTable();
})
function showTable(){
var class_name = $("#class-name option:selected").text();
var student_name = $("#student-name option:selected").text();
var course_name = $("#course-name option:selected").text();
var exam_info = $("#exam-info option:selected").text();
var json_data = {
"class_name": class_name,
"student_name": student_name,
"course_name": course_name,
"exam_info": exam_info,
};
console.log(json_data);
$.ajax({
type:'POST',
url:'/sg/showNotes/',
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data: JSON.stringify(json_data),
contentType: 'application/json; charset=UTF-8',
dataType: 'json',
traditional: true,
async:true,
success: function(data) {
var str_lookup_result = JSON.stringify(data.lookup);
var array_lookup_result = JSON.parse(str_lookup_result);
//显示数据到表格
$("#table-query").DataTable({
"data": array_lookup_result,
"columns": [
{ data: "class_name",
className:'table-center',},
{ data: "student_name",
className:'table-center',},
{ data: "exam_info",
className:'table-center',},
{ data: "course_name",
className:'table-center-hide',
createdCell: function(nTd, sData, oData, iRow, iCol){
$(nTd).attr('title',sData);
},
},
{ data: "grades",
className:'table-center-hide',
createdCell: function(nTd, sData, oData, iRow, iCol){
if(sData < 60) {
$(nTd).css("background-color", "#FFB6C1");
};
},},
],
"scrollX": true,
"autoWidth": false,//自动宽度
"columnDefs": [
{
targets:0,
className:'select-checkbox',
},
],
"select":{
style:'os',
selector:'td:first-child', //点击该行第一个元素,选中这一行
},
"dom": "lBfrtip",//自定义显示项,并控制布局
"lengthMenu": [
[50, 6, 8, -1],
[4, 6, 8, "All"]
],//每页显示条数设置
"lengthChange": false,//是否允许用户自定义显示数量
"bPaginate": true, //翻页功能
"bFilter": true, //列筛序功能
"searching": true,//本地搜索
"ordering": true, //排序功能
"Info": true,//页脚信息
"destroy": true, //销毁已经存在的Datatables实例并替换新的选项
buttons: [
{ extend: 'excel', text: '另存为Excel' },
],
});
},
});
}
代码截图
以上为本次的学习内容,下回见