bootstrap绑定datatables问题

[hmgjdh]

自己写的搜索功能不能用，代码如下：

<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#datatable_fixed_column').dataTable({
"sDom": "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
"sAjaxSource": "Handler.ashx“,
"bLengthChange": true,
"bPaginate": true,

"oLanguage": {
"sSearch": "Search all columns:"
}
});
$("#SearchId").click(function () {
///在单击搜索按钮时想重新请求数据库绑定table,不想用下面注释的方法，（下面注释的方法是框架自带的搜索方法）我想自己 写一个方法单击时重新绑定table。
// oTable.fnFilter("", oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), Number(0)));
//单击是以下代码不执行

var oTable = $('#datatable_fixed_column').dataTable({
"sDom": "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
"sAjaxSource": "Handler.ashx?str=proName like '%c%'", //在这里重新带条件请求数据
"bLengthChange": true,
"bPaginate": true,
"oLanguage": {
"sSearch": "Search all columns:"



}
});
});
})
</script>
自己写的搜索功能不能用，代码如下：

<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#datatable_fixed_column').dataTable({
"sDom": "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
"sAjaxSource": "Handler.ashx“,
"bLengthChange": true,
"bPaginate": true,

"oLanguage": {
"sSearch": "Search all columns:"
}
});
$("#SearchId").click(function () {
///在单击搜索按钮时想重新请求数据库绑定table,不想用下面注释的方法，（下面注释的方法是框架自带的搜索方法）我想自己 写一个方法单击时重新绑定table。
// oTable.fnFilter("", oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), Number(0)));
//单击是以下代码不执行

var oTable = $('#datatable_fixed_column').dataTable({
"sDom": "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
"sAjaxSource": "Handler.ashx?str=proName like '%c%'", //在这里重新带条件请求数据
"bLengthChange": true,
"bPaginate": true,
"oLanguage": {
"sSearch": "Search all columns:"



}
});
});
})
</script>
（图片地址：http://e.hiphotos.baidu.com/zhidao/pic/item/29381f30e924b899ad1f59226d061d950a7bf68c.jpg）

[业余草]

<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="icofont-caret-up"></i></a> <a data-box="close" data-hide="bounceOutRight">×</a> </div> <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 style="width:290px;">操作</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;"> <div class="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> </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 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", 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>' +'  '+'<a data-title="' + full[0] + '" class="btn btn-primary" href="/config/edit?aid=' + full[0] + '"><i class="icon-wrench icon-white" ></i>配置</a>' +'  '+'<a alt="' + full[2] + '" class="btn btn-info" href="#" data-toggle="modal" data-target="#daima"><i class="icon-tasks icon-white"></i>代码</a>' +'  '+'<a data-title="' + full[0] + '" class="btn btn-warning" href="/service/show?aid=' + full[0] + '"><i class="icon-user 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 * 排序请求 */ querysOrder := []string{} if iSortCol_0, _ := strconv.Atoi(Input.Query("iSortCol_0")); iSortCol_0 > -1 { ranges, _ := strconv.Atoi(Input.Query("iSortingCols")) for i := 0; i < ranges; i++ { istring := strconv.Itoa(i) if iSortcol := Input.Query("bSortable_" + Input.Query("iSortCol_"+istring)); iSortcol == "true" { sordir := Input.Query("sSortDir_" + istring) thisSortCol, _ := strconv.Atoi(Input.Query("iSortCol_" + istring)) if sordir == "asc" { querysOrder = append(querysOrder, aColumns[thisSortCol]) } else { querysOrder = append(querysOrder, "-"+aColumns[thisSortCol]) } } } } /* * Filtering * 快速过滤器 */ //querysFilter := []string{} cond := orm.NewCondition() if len(Input.Query("sSearch")) > 0 { for i := 0; i < len(aColumns); i++ { cond = cond.Or(aColumns[i]+"__icontains", Input.Query("sSearch")) } } /* Individual column filtering */ for i := 0; i < len(aColumns); i++ { if Input.Query("bSearchable_"+strconv.Itoa(i)) == "true" && len(Input.Query("sSearch_"+strconv.Itoa(i))) > 0 { cond = cond.And(aColumns[i]+"__icontains", Input.Query("sSearch")) } } /* * GetData * 数据请求 */ o := orm.NewOrm() qs := o.QueryTable(thismodel) counts, _ = qs.Count() qs = qs.Limit(iDisplayLength, iDisplayStart) qs = qs.SetCond(cond) for _, v := range querysOrder { qs = qs.OrderBy(v) } qs.Values(&maps) count, _ = qs.Count() return maps, count, counts } 这是一个成功的例子，希望能对你有帮助