bootstrap中使⽤datatables
今天⼤象研究了下datatables表格，下⾯来介绍下datatables，我是在bootstrap中使⽤的，引⼊必须的JS后就可以开始使⽤了，⾸先表格
的HTML
<div class="row-fluid">
<div class="span12">
<div class="box corner-all">
<div class="box-header grd-white corner-top">
<div class="header-control"> <a data-toggle="modal" data-target="#myModal2"><i class="icon-external-link"></i></a> <a data-box="collapse"><i class="i <span>⽤户列表</span> </div>
<div class="box-body">
<table id="datatables" class="table table-bordered table-striped responsive">
<thead>
<tr>
<th>Id</th>
<th>规则名</th>
<th>中⽂名</th>
<th>状态</th>
<th >操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
<h4 class="modal-title" id="myModalLabel">规则编辑</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="Name">规则标识</label>
<div class="controls">
<input type="text" id="Name" name="Name">
(英⽂⼩写)
<input type="hidden" name="Id" id="Id" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="Title">规则中⽂名称</label>
<div class="controls">
<input type="text" id="Title" name="Title">
</div>为什么使用bootstrap?
</div>
<div class="control-group">
<label class="control-label" for="Condition">规则表达式</label>
<div class="controls">
<textarea id="Condition" name="Condition"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input name="Status" type="checkbox" id="Status" value="1">
激活 </label>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /box-body -->
</div>
<!-- /box -->
</div>
<!-- /span -->
</div>
datatables增删改查的实现
<script type="text/javascript">
$(function(){
var id = 0;//修改数据的ID
var table = $('#datatables');//表格对象
//获取修改时显⽰的数据，弹出modal模态对话框
$(document).delegate(".btn.btn-success","click",function(){
$("#myModal #myModalLabel").text("修改权限规则");
id = $(this).attr("data-title");
data={id:id}
$.ajax({
type:"GET",
data:data,
url:"/rule/edit",
dataType:"json",
success: function(json){
if(json.status){
$("#myModal #Id").val(json.data.Id);
$("#myModal #Name").val(json.data.Name);
$("#myModal #Title").val(json.data.Title);
$("#myModal #Condition").val(json.data.Condition);
if(json.data.Status==1){$("#myModal #Status").attr("checked","checked");
}else{$("#myModal #Status").attr("checked",false);}
}else{
alert(json.msg);
}
}
});
$('#myModal').modal({keyboard:false,show:true})
})
//保存，增加和修改时都使⽤这个⽅法提交表单，区别在于修改时有ID参数⽽增加时没有
$(document).delegate(".modal-dialog .btn.btn-primary","click",function(){
data = $(".form-horizontal").serialize();
$.ajax({
type:"POST",
type:"POST",
data:data,
url:"/rule/save",
dataType:"json",
success: function(json){
alert(json.msg);
if(json.status==1){
$('#myModal').modal("hide");
table.fnClearTable();//清空数据表
}
}
});
});
//增加，弹出modal模态对话框
$("#account_add").click(function(){
$("#myModal #myModalLabel").text("增加权限规则");
$("#myModal #id").val("");
$("#myModal #name").val("");
$("#myModal #title").val("");
$("#myModal #condition").val("");
$("#myModal #status").attr("checked","checked");
$('#myModal').modal({keyboard:false,show:true})
});
//datatables显⽰列表
table.dataTable( {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",//定义DataTable布局的⼀个强⼤属性
"sPaginationType": "bootstrap",//分页样式使⽤bootstrap
"oLanguage": {//语⾔设置
"sLengthMenu": "每页显⽰ _MENU_ 条记录",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"oPaginate": {
"sFirst": "⾸页",
"sPrevious": "前⼀页",
"sNext": "后⼀页",
"sLast": "尾页"
},
"sZeroRecords": "抱歉，没有到",
"sInfoEmpty": "没有数据"
},
"bProcessing": true, //当datatable获取数据时候是否显⽰正在处理提⽰信息。
"bServerSide": true, //客户端处理分页
"sAjaxSource": "/rule/list", //ajax请求地址
'bStateSave': true, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这
个记录后，即使刷新⼀次页⾯，或重新打开浏览器，之前的状态 "aoColumnDefs": [{ //给每个单独的列设置不同的填充，或者使⽤aoColumns也⾏
"aTargets": [3],
"mData": null,
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, full) {
if(full[3] == 1){
return "使⽤中"
}else if(full[3] == 0){
return "禁⽤"
}
}
},{
"aTargets": [4],
"mData": null,
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, full) {
return '<a data-toggle="modal" data-target="#myModal" data-title="' + full[0] + '" class="btn btn-success" href="#"><i class="icon-edit icon-white"></i>修改</a }
}
}]
});
});
</script>
服务端返回数据为JSON格式的，需要你返回的是这样的JSON格式，我使⽤了GO来返回这些数据，你也可以使⽤PHP或者其它程序返回
{
"aaData": [
[
1,
"基本⾯夺555",
"什么呀5566",
1
],
[
2,
"rule_show",
"权限规则显⽰",
1
],
[
3,
"rule_save",
"权限规则编辑",
1
]
,
[
4,
"rule_del",
"权限规则删除",
1
],
[
5,
"account/show",
"帐户显⽰权限",
1
],
[
6,
"account/edit",
"帐户修改权限",
1
],
[
7,
"account/save",
"帐户编辑权限",
1
]
],
"iTotalDisplayRecords": 7,
"iTotalRecords": 7,
"sEcho": "1"
}
golang处理部分
/*
* 显⽰datatables列表页数据
*/
func (this *RuleController) List() {
var rule models.Rule
aColumns := []string{
"Id",
"Name",
"Title",
"Status",
}
maps, count, counts := d.Datatables(aColumns, rule, this.Ctx.Input)
var output = make([][]interface{}, len(maps))
for i, m := range maps {
for _, v := range aColumns {
output[i] = append(output[i], m[v])
}
}
data := make(map[string]interface{}, count)
data["sEcho"] = this.GetString("sEcho")
data["iTotalRecords"] = counts
data["iTotalDisplayRecords"] = count
data["aaData"] = output
this.Data["json"] = data
this.ServeJson()
}
golang具体处理过程
/*
* aColumns []string `SQL Columns to display`
* thismodel interface{} `SQL model to use`
* ctx *context.Context `Beego ctx which contains httpcontext`
* maps []orm.Params `return result in a interface map as []orm.Params`
* count int64 `return iTotalDisplayRecords`
* counts int64 `return iTotalRecords`
*
*/
func Datatables(aColumns []string, thismodel interface{}, Input *context.BeegoInput) (maps []orm.Params, count int64, counts int64) { /*
* Paging
* 分页请求
*/
iDisplayStart, _ := strconv.Atoi(Input.Query("iDisplayStart"))
iDisplayLength, _ := strconv.Atoi(Input.Query("iDisplayLength"))
/*
* Ordering
* 排序请求
*/
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论