jquery datatable改为多条件按钮查询

abcdeewww 2016-11-23 11:46:11
使用jquery datatable 要把原来默认的搜索改为多条件并且点击按钮进行查询(不刷新页面),网上看了很多资料,但总是出错,不知道api是否用错了。
相关的js:

$(function () {
var oTable;
$(document).ready(function() {
oTable = initTable();//初始化表格
});

function initTable() {
$("#example1").DataTable({
"processing" : true,
"serverSide" : true,
"bFilter" : true, //是否启动过滤、搜索功能
"bSort" : true,
"iDisplayLength" : 10,
"sAjaxSource" : "{:U('Test/testData')}",
'bPaginate' : true,//分页
"bDestory" : true,//??
"bRetrieve" : true,//??
"aLengthMenu" : [ [ 2, 5, 10, -1 ],
[ 2, 5, 10, "All" ] ],
"bStateSave" : true,
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条项结果",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "显示第 _START_ 至 _END_ 项结果 ,共 _TOTAL_ 项",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }] ,
"aoColumns" : [
{
"mDataProp" : "id"
},
{
"mDataProp" : "name"
},
{
"mDataProp" : "email"
},
{
"mDataProp" : "id",
"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
$(nTd)
.html("<a class='btn btn-info' href='edit?id="+sData+"'>修改</a>    ")
.append("<a class='btn btn-success' href='Info?id="+sData+"'>管理信息</a>    ")
}
}, ],

"fnInitComplete" : function(oSettings, json) {
$(
'<a href="{:U('Test/testAdd')}" class="btn btn-primary">添加</a>').appendTo(
$('.myBtnBox'));

},


});
}

});


html页面相关的设置:

<div class="box">
<div class="box-header">
<div class="span6 myBtnBox"></div>
</div>
<!-- <form method="post"> -->

<!--<label>名称:</label><input type="text" class="column_filter_name form-control input-inline" id="col1_filter" data-column="1" value="t">   -->


<input type="text" id="name" name="name">
<input type="text" id="email" name="email">
<button type="sumbit" name="btnType" id="btnType">查询</button>
<!-- </form> -->
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th width="50">ID</th>
<th width="100">名称</th>
<th width="100">邮箱</th>
<th width="150" align="center">管理</th>
</tr>
</thead>
<tbody>


</tbody>
</table>
</div>
<!-- /.box-body -->
</div>


试了 $('#example1').DataTable().column( i ).search(
$('#col'+i+'_filter').val()
).draw();
及 $("button[name='btnType']").bind("click", function () { //按钮 触发table重新请求服务器
oTable.fnDraw();
});
但最终都有问题,帮忙看下js那是要怎么改的。分不多,有了解麻烦帮下,急用,谢谢。
最终效果需要为类似:

...全文
413 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿凡达的寂寞 2016-12-14
  • 打赏
  • 举报
回复
加qq 1396968024一起探讨!
阿凡达的寂寞 2016-12-14
  • 打赏
  • 举报
回复
需要设置 向后台传递额外参数

//向服务器传额外的参数
           "fnServerParams": function (data) {
        	   data.push({"name": "username", "value": $.trim($('#username').val())});

               data.push({"name": "quanxian", "value": $('#quanxian').val()});
               data.push({"name": "phone", "value": $('#phone').val()});
               data.push({"name": "money", "value": $('#money').val()});
               data.push({"name": "state", "value": $('#state').val()});
          
               data.push({"name": "checkoutDateStart", "value": $('#checkoutDateStart').val()});
               data.push({"name": "checkoutDateEnd", "value": $('#checkoutDateEnd').val()});
               
  
           }
       };


87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧