HTML按钮
<!--操作按钮--> <div class="btn-group"> <button id="progress">正常</button> <button id="alerted">警告</button> <button id="closed">停机</button> </div>
JS操事件
$(function () { $('#progress').on('click', function () { $('.dataTables_filter [type=search]').val("正常运行").keyup(); }); $('#alerted').on('click', function () { $('.dataTables_filter [type=search]').val("警告").keyup(); }); $('#closed').on('click', function () { $('.dataTables_filter [type=search]').val("停机").keyup(); }); })
JS配置项
dom: '<"searchBox"lf>tip',//控件位置 bFilter: true,//过滤 pagingType: "first_last_numbers",//分页样式 pageLength: 10,//默认显示条数; bPaginate: true,//分页总开关
CSS样式
/*弹出模态框筛选组*/ .btn-group { margin-top: 10px; float: left; margin-left: 10px; display: inline-block; } #progress { width: 80px; height: 30px; color: #fff; outline: none; border: 0; border-radius: 5px; background: #01a016; cursor: pointer; } #alerted { width: 80px; height: 30px; color: #fff; outline: none; border: 0; border-radius: 5px; background: #e60000; cursor: pointer; } #closed { width: 80px; height: 30px; color: #fff; outline: none; border: 0; border-radius: 5px; background: rgba(173, 148, 1, 1); cursor: pointer; } .searchBox { float: right; display: inline-block; margin-top: -25px; margin-right: 10px; } .searchBox select { width: 60px; height: 26px; } .searchBox input { width: 100px; height: 26px; } #example_filter { margin-left: 20px; }
@lockdata.cn