jquery DataTables在按钮单击时搜索，而不是键入输入

jchrr9hc 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(105)

我想知道是否有可能将搜索功能从input中移出，用于DataTables修改的表。目前我有一个自定义输入来执行这个函数：

<script>
    $(document).ready(function() {
        var oTable = $('#staffTable').DataTable();
        $('#searchNameField').keyup(function () {
            oTable.search($(this).val()).draw();
        });
    })
</script>

字符串
输入看起来像这样：

<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
    <input type="text" class="form-control ml-0 pl-2" id="searchNameField"
            placeholder="Name" autofocus/>
</div>

型
我想做的是把这个移到一个按钮上。我认为可能的情况如下：

<script>
    $(document).ready(function() {
        var oTable = $('#staffTable').DataTable();
        $('#searchButton').click(function () {
            oTable.search($(this).val()).draw();
        });
    })
</script>

型
按钮看起来像这样：

<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
    <i class="fa fa-search">
        Search
    </i>
</button>

型
然而，当我点击按钮时，这不起作用。在输入这个问题时，我意识到这可能是因为当我单击按钮时，它不知道从哪里获取过滤器文本以实际过滤表。
有没有一种方法，我可以有一个按钮点击，引用输入，然后去过滤表？

jquery

来源：https://stackoverflow.com/questions/47535637/datatables-search-on-button-click-instead-of-typing-in-input

2条答案

按热度按时间

vsikbqxv1#

你是对的，你需要重新定义$(this)，它现在指的是按钮，而不是搜索框：

$(document).ready(function() {
    var oTable = $('#staffTable').DataTable();
    $('#searchButton').click(function () {
        oTable.search($("#searchNameField").val()).draw();
    });

    // EDIT: Capture enter press as well
    $("#searchNameField").keypress(function(e) {
        // You can use $(this) here, since this once again refers to your text input            
        if(e.which === 13) {
            e.preventDefault(); // Prevent form submit
            oTable.search($(this).val()).draw();
        }
    });
});

字符串

赞(0）回复(0）举报 2023-08-04

daupos2t2#

这对我很有效

let datatable = $('#reg_users').DataTable({
    'processing': true,
    'serverSide': true,
    'serverMethod': 'GET',  
    'ajax': { 'url':'<?=$url?>adminActions.php?action=FETCH_USERS' },
    'columns': [ 
        { data: 'index' }, 
        { data: 'user_registered' }, 
        { data: 'full_name' },
        { data: 'email_address' },
    ],
    search: {
        return: true
    } 
}); 

$("#reg_users_filter").append(`<button id="searchbtn">Search</button>`);

$("#searchbtn").click(e =>{  
        datatable.search($('#reg_users_filter input').val()).draw(); 
});

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery DataTables在按钮单击时搜索，而不是键入输入

2条答案

相关问题

热门标签

最新问答