带有一些自定义搜索字段的数据表 [英] datatable with some custom search fields

查看:53
本文介绍了带有一些自定义搜索字段的数据表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我第一次实现datatable插件,显然是在stackoverflow成员的帮助下。再次感谢他们。现在,我担心的问题如下:
我有一个页面,其中包含一些搜索字段,例如名称文本字段,用户名文本字段,类别下拉列表,年龄范围等,以及一个提交按钮以进行搜索。默认情况下,将显示所有记录,并且通过使用数据表,我能够对它们进行升序或降序排序。我仅通过css(display:none)删除插件的默认搜索字段。现在,当我通过该搜索表单搜索记录时,我的记录列表应使用该datatable插件实现。但是我做不到。请帮我如何处理。
自定义搜索类似于:

First time I have implemented the datatable plugin, and obviously by the help of stackoverflow's member. Thanks them again. Now my concern issue is like the following: I have a page with some search fields like name text field, username text field, category dropdown, age range etc. and one submit button to search. By default all the records will be showing and by making use of datatable, I am able to sort them either ascending order or descending order. I remove the default search field of the plugin by css only(display:none). Now when I search records through that search form, my list of records should implement with that datatable plugin. But I am unable to do that. Please help me how to process. The custom search is like:

<form name="search_user_form" id="search_user_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="GET" > 


    <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" class="form_table" id="searching_parameter" >
                        <tr>
                            <td>Name : <input type="text" class="textbox_small" name="search_name" id="search_name" value="<?php echo $_REQUEST['search_name']; ?>" /></td>
                            <td>Username : <input type="text" class="textbox_small" name="search_username" id="search_username" value="<?php echo $_REQUEST['search_username']; ?>" /></td>
                        </tr>
                        <tr>
                            <td>Email : <input type="text" class="textbox_small" name="search_email" id="search_email" value="<?php echo $_REQUEST['search_email']; ?>" /></td>
                            <td>Age &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <!--<input type="text" class="textbox_small" name="search_age" id="search_age" value="<?php echo $_REQUEST['search_age']; ?>" />-->

                           <input type="text" size="3" value="<?php echo $_REQUEST['min_age']; ?>" name="min_age" id="min_age" maxlength="2" onKeyPress="return numbersonly(event, false)" > &nbsp;&nbsp;
                           To  &nbsp;&nbsp;<input type="text" size="3" value="<?php echo $_REQUEST['max_age']; ?>" name="max_age" id="max_age" maxlength="2" onKeyPress="return numbersonly(event, false)" >                        

                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">Privilege:
                       <select class="soring_select" name="search_privilege" id="search_privilege" style="height:28px;">
                            <option value="0" <?php echo $selection_agent;?>>Agent</option>
                            <option value="1" <?php echo $selected_admin;?>>Admin</option>
                            <option value="2" <?php echo $selected_supeadmin;?>>Superadmin</option>
                            <option value="3" <?php echo $selected_owner;?>>Owner</option>
                            <option value="all" <?php echo $selected_no;?>>All Privilege</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" name="search_user_btn" id="search_user_btn" value="Search">&nbsp;&nbsp;<input type="reset" value="Cancel" /></td>
                    </tr>
                </table>
            </form> 

对于插件:

$('#example').dataTable( {
                            "bProcessing": true,
                            "bServerSide": true,
                        "sAjaxSource": "datatabledb.php?query=<?php (isset($_REQUEST['search_user_btn']))?$search_sql:'';?>",
                            "bJQueryUI": true,
                            "sPaginationType": "full_numbers",
                            "sDom": 'T<"clear">lfrtip',
                            "oTableTools": {
                                "aButtons": [

                                    {
                                        "sExtends": "csv",
                                        "sButtonText": "Save to CSV"
                                    }
                                ]
                            }       

                        } );


推荐答案

您可以从数据表MultiFilter开始,但是您应该通过按下提交按钮后,键/值对中的数据:

You can start with datatables MultiFilter But you should pass the data in Key/value pairs after pressing submit buttons:

http://datatables.net/plug-ins/api#fnMultiFilter

您可以通过以下方式调用它:

you can call this by following:

var defaultFilter = {"name":"john","username":"userjohn"};
oTable.fnMultiFilter(defaultFilter);

对于范围,您应该做一些事情来更改API。

And for ranges you should do some stuff to make the change in API.

这篇关于带有一些自定义搜索字段的数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆