以下代码全部在谷歌浏览器上验证使用并通过，使用了Jquery-3.2.1，和bootstrap3.3.7，Jquery-Table 1.10.15
注意：下面的get请求中的req_for_data1是和python项目中urls.py代码对接的,
而getErrorMessage是和python项目中的views.py对接的，使用java的需要注意一下，这里不太一样。
1.定时5秒获取指定的数据：
var interval;
#第一次打开页面时，要直接运行定时任务
refreshData();
#之后每隔5s运行一下定时任务
runData();
function runData() {
interval = setInterval(refreshData, "5000");
}
function refreshData() {
$.get("{% url 'req_for_data1' %}", {"getErrorMessage": null,}, function (data, status) {
if (status == 'success') {
}
})
}其对应的后台代码为：
if request.method == 'GET':
request_data = request.GET
# 获取错误信息
if "getErrorMessage" in request_data:
count = models.T_XXXXXxxxx.objects.all().count()
return HttpResponse(count)
2.Jquery Table插件的使用(和bootstrap Table不是一回事)：
Jquery Datatable中数据是用ajax动态生成时，该表格的初始化过程，以及表格绘制时，其每一个tr中的td也要根据数据选择性的生成button或label，几乎都有一个共同的操作，以下为例子:
首先在html中声明一个表格，声明的同时，你要确定你引用了下面两个js：
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<table class="table table-hover table-striped table_search" id="table_search">
</table>
然后初始化该Jquery Datatable,注意，下面的代码直接写在了<script></script>中，定义为当前页面的全局变量，定义全局变量的目的是，我们的currentSource1可能会改变。
例如，点击按钮后，该Datatable的sAjaxSource的请求地址要改变，这个时候不用再声明再写一次，具体看代码:
var currentSource1 = "/demo/demoMessage?getSearchResult=None&";
var oTable1;
var initParams1 = {
sortable: false,
paging: true,//分页
ordering: true,//是否启用排序
searching: true,//搜索
language: {
lengthMenu: '<select class="form-control" style="width:150px">'
+ '<option value="10" disabled selected>每页显示10条</option>'
+ '<option value="5">5条</option>'
+ '<option value="10">10条</option>'
+ '<option value="15">20条</option>'
+ '<option value="50">50条</option>'
+ '<option value="100">100条</option>'
+ '</select>',//左上角的分页大小显示。
search: ' <label>搜索：</label>',//右上角的搜索文本，可以写html标签
sProcessing: "数据获取中...",
paginate: {//分页的样式内容。
previous: "上页",
next: "下页",
first: "首页",
last: "尾页"
},
pagination: true, //是否显示分页（*）
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示，
},
method: 'get', //请求方式（*）
contentType: 'application/json;charset=UTF-8',
pagingType: "full_numbers",//分页样式的类型
"sAjaxSource": currentSource1,
columns: [
{
title: "",
sWidth: "10px",
data: null, 'render': function (data, type, full, meta) {
return meta.row + 1 + meta.settings._iDisplayStart;
}
},
{title: "id", data: "id", sClass: "hidden"},
{title: "姓名", data: "t_Demoname", sWidth: "35%"},
{
title: "操作", data: null, sWidth: "15%",
'render': function (data, type, full, meta) {
return '<button type="button" class="btn btn-warning btn-xs btn-flat btn_modify" data-toggle="modal" data-target="#modal-Modify">' +
'<i class="fa fa-pencil"></i>修改</button> ' +
'<button type="button" class="btn btn-danger btn-xs btn-flat btn_delete">\<i class="fa fa-close" ></i> 删除 </button>'
}
},
]
}
所有的准备已做好，当用户打开页面时，我们就要去获取ajax数据，填充到表格，这时要做的就是就是初始化表格，
该代码写在<script></script>或者$(document).ready(function (）{}）中都可以：
initParams1.sAjaxSource = currentSource1;
oTable1 = $('#table_search').dataTable(initParams1);
此时，表格初始化完成，但有时，我们需要添加过滤条件，例如通过click事件，改变url地址，或者是请求地址不变添加一些参数，不论两者中的那种，对于Jquery Table来言，都要修改initParams1.sAjaxSource，这是必不可少的。
所以我们要清空原有的数据，对其进行重新绘制。（如果只是刷新Table，则不用这样做）
注意：此时的oTable1必须有数据，上面的代码已经初始化过了，肯定是有数据的，此时若没有数据则检查代码！
$("#btn_search").bind('click', function () {
var demoName = $("#demoName").val()
if(roleState==null)
roleState="";
oTable1.fnDestroy();
oTable1.fnClearTable();//清空数据.fnClearTable();//清空数据
initParams1.sAjaxSource = "/demo/demoManage1?getSearchResult=None&demoName=" + demoName
oTable1 = $('#table_search').dataTable(initParams1);
})
编写完成后，结果如图：
3.在bootstrap3中的modal里使用Jquery datatable，该datatable中的数据通过ajax获取：
Html代码：
<div class="modal fade" id="modal-packModifyAdd">
<div class="modal-dialog" style="width: 1000px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">数据添加</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" style="width:100%;" id="table_getloclImageList">
</table>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
JS代码，将datatable中不需要的属性设置为false，以及将一些字符串置为空，同时添加一些我们需要的标签（例如select和 button）：
$("#table_getXXXX").DataTable({
sortable: false,
paging: false,//分页
ordering: false,//是否启用排序
searching: false,//搜索
language: {
lengthMenu: '<select class="form-control" style="width:150px">'
+ '<option value="10" disabled selected>每页显示10条</option>'
+ '<option value="5">5条</option>'
+ '<option value="10">10条</option>'
+ '<option value="15">20条</option>'
+ '<option value="50">50条</option>'
+ '<option value="100">100条</option>'
+ '</select>',//左上角的分页大小显示。
search: ' <label>搜索：</label>',//右上角的搜索文本，可以写html标签
sProcessing: "数据获取中...",
paginate: {//分页的样式内容。
previous: "上页",
next: "下页",
first: "首页",
last: "尾页"
},
pagination: false, //是否显示分页（*）
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
{# info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。#}
info: "",
infoEmpty: "",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示，
},
method: 'get', //请求方式（*）
contentType: 'application/json;charset=UTF-8',
pagingType: "full_numbers",//分页样式的类型
"sAjaxSource": "/service/Xxxx?xxxxxx=None",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
url: sSource,//这个就是请求地址对应sAjaxSource
data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
type: 'get',
dataType: 'json',
async: false,
success: function (result) {
fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
},
error: function (msg) {
}
});
},
"columnDefs": [
{
"targets": -1,
"data": null,
"defaultContent": "<button type='button' class='btn btn-success btn-xs btn-flat submitContainer' > <i class='fa fa-pencil'></i>提交</button >"
},
],
columns: [
{
title: "资源Ip",
data: null,
"render": function (data, type, full, meta) {
tempHtml0 = '<select class="form-control select2 dataList" style="width: 100%;" >' +
'<option value="0" selected="selected" >请选择Ip</option>' +
'</select>'
return tempHtml0;
}
},
{
title: "数据类型列表",
data: "imageData",
"render": function (data, type, full, meta) {
if (data == null)
return;
if (Object.prototype.toString.call(data) === "[object String]") {
return data;
}
else {
tempHtml0 = "<select style='width: 100%;height:34px;'>"
tempHtml1 = "";
for (var i = 0; i < data.length; i++) {
tempHtml1 += "<option value=" + data[i] + ">" + data[i] + "</option>";
}
tempHtml1 += "</select>";
return tempHtml0 + tempHtml1;
}
}
},
{
title: "数据来源",
data: null,
"render": function (data, type, full, meta) {
return '<input type="text" class="form-control" id="text_submitXXX" placeholder="数据来源" style="width:100%">'
}
},
{
title: "操作",
data: null,
"render": function (data, type, full, meta) {
return "<button type='button' class='btn btn-success btn-xs btn-flat btn_submitXXX' style='height:34px;' > <i class='fa fa-pencil'></i>提交</button >"
}
},
]
})
最后的运行效果图如下：
上面用到了bootstrap的select2标签，datatable加载的时候也需要对其进行初始化,对其初始化要写在document.ready方法中,这里的select2作用 主要是查询客户输入的数据（该用户必须输入三个字符）：
{#动态select2初始化按钮#}
$('.dataIpList').select2({
ajax: {
url: "/service/dataMessage?dataList=None",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 3,
language: "zh-CN", //设置 提示语言
maximumSelectionLength: 3, //设置最多可以选择多少项
placeholder: "请选择",
tags: false, //设置必须存在的选项 才能选中
});