11-08 3 views
DataTable是个非常不错的插件，一个搜索框可以搜所有，有时也会想要多条件匹配
引入css,js
|
1 2 3 4 5 |
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link href="{% static 'css/plugins/datatables/datatables.min.css' %}" rel="stylesheet"> <script src="{% static 'js/jquery-2.1.1.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/plugins/datatables/datatables.min.js' %}"></script> |
在原有的datatable上再定义一个table,做为其它条件的搜索框
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<div class="form-horizontal" id="a-search" style="display: none;"> <div class="dataTables_filter"> <table id="asset_search_table" style="width: 90%; margin: 0 auto 2em auto;" cellspacing="0" cellpadding="3" border="0"> <tr> <td id="filter_colapt" data-column="apt"> <div class="form-group" style="margin-bottom: 0px;"> <div class="col-md-6" style="width: 100%;"><input class="form-control column_filter" placeholder="{% trans 'application' %}" id="colapt_filter" type="text"> </div> </div> </td> <td width="10%"></td> <td id="filter_col6" data-column="6"> <div class="form-group" style="margin-bottom: 0px;"> <div class="col-md-6" style="width: 100%;"> <select class="select2 form-control column_filter" id="col6_filter"> <option value="">{% trans 'Select Environment' %}</option> {% for e in env_list %} <option value="{{ e.code }}" {% if e == env %} selected {% endif %}>{{ e }}</option> {% endfor %} </select> </div> </div> </td> </tr> <tr style="height: 15px"> <td></td> <td></td> </tr> <tr> <td id="filter_col2" data-column="2"> <div class="form-group" style="margin-bottom: 0px;"> <div class="col-md-6" style="width: 100%;"> <select class="select2 form-control column_filter" id="col2_filter"> <option value="">{% trans 'Select Asset Type' %}</option> {% for at in asset_type_list %} <option value="{{ at.code }}" {% if at == asset_type %} selected {% endif %}>{{ at }}</option> {% endfor %} </select> </div> </div> </td> <td width="10%"></td> <td> <div class="form-group" style="margin-bottom: 0px;"> <div class="col-md-6" style="width: 100%;"><input name="toggle_search" class="form-control global_filter" placeholder="{% trans 'Search' %}" id="global_filter" type="text"> </div> </div> </td> </tr> <tr style="height: 15px"> <td></td> <td></td> </tr> </table> </div> </div> |
效果如下：
然后在底部JS部分添加对新定义的table 搜索框的操作
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function filterGlobal() { $('#asset_list_table').DataTable().search( $('#global_filter').val() ).draw(); } function filterColumn(i) { $('#asset_list_table').DataTable().column(i).search( $('#col' + i + '_filter').val() ).draw(); } function toggle() { if (show === 1) { $("#a-search").show(500, function () { $("#asset_list_table_filter").hide(500); $("#toggle-icon").attr("class", "fa fa-angle-up fa-xs"); $('#global_filter').val(""); }); show = 0; } else { $("#a-search").hide(500, function () { $("#toggle-icon").attr("class", "fa fa-angle-down fa-xs"); $("#asset_list_table_filter").show(500); $('#col6_filter').val(""); $('#col2_filter').val(""); $('#colapt_filter').val(""); $('#global_filter').val(""); }); show = 1; } } $(document).ready(function () { initTable(); $('#asset_list_table').DataTable(); $('input.global_filter').on('keyup click', function () { filterGlobal() }); $('input.column_filter').on('keyup click', function () { filterColumn($(this).parents('td').attr('data-column')); }) $('select.column_filter').on('keyup click', function () { filterColumn($(this).parents('td').attr('data-column')); }) }) |
实现的效果如下
如果想赏钱，可以用微信扫描下面的二维码，一来能刺激我写博客的欲望，二来好维护云主机的费用； 另外再次标注博客原地址 itnotebooks.com 感谢！
