如何为DataTable外部的输入框绑定keyup事件触发AJAX请求更新表格

前置说明 #

假设你外部的输入框设置ID为custom-search-input，可根据实际场景替换为你自己的输入框ID。

完整代码实现 #

1. HTML部分（外部输入框示例） #

<input type="text" id="custom-search-input" placeholder="输入搜索内容">
<!-- 原有表格结构保持不变 -->
<table id="bootstrap-data-table-export" class="table table-striped table-bordered"></table>

2. JS部分 #

// 防抖函数，避免输入过程中频繁发起请求
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 缓存DataTable实例，避免重复获取
let dataTableInstance;
// 请求锁，避免重复发起请求
let isRequesting = false;

// 表格初始化
$(function () {
    dataTableInstance = $('#bootstrap-data-table-export').DataTable({
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],                
        columnDefs: [{
            targets: -1,
            data: null,
            defaultContent: "<button class='btn btn-sm table-button-dark' ><i class='fa fa-archive fa-xs'></i></button> <button class='btn table-button-dark btn-sm' ><i class='fa fa-eye fa-xs'></i></button> <button class='btn table-button-dark btn-sm' ><i class='fas fa-download fa-xs' /></button>"
        }],
        language: {
            lengthMenu: "Sayfa Başına _MENU_ Kayıt",
            zeroRecords: "Böyle Bir Kayıt Yok",
            info: "_PAGE_ Sayfanın _PAGES_ . Sayfasındasınız",
            infoEmpty: "No records available",
            infoFiltered: "(Toplam _MAX_ Filtrelendi)",
            search: "Ara",
            paginate: {
                previous: "Önceki",
                next:"Sonraki"
            }
        }
    });

    // 绑定外部输入框的keyup事件，加300ms防抖
    $('#custom-search-input').on('keyup', debounce(function () {
        const searchValue = $(this).val().trim();
        // 传递搜索参数到请求函数
        getDT({keyword: searchValue});
    }, 300));
})

// 请求数据更新表格函数
function getDT(data) {
    if (isRequesting) return;
    isRequesting = true;
    $.ajax({
        method: 'POST',
        data: data,
        url: '/api/ajax/SeriesList',
    }).done(function (result) {
        // 兼容返回json字符串和json对象两种情况
        let res = typeof result === 'string' ? JSON.parse(result) : result;
        // 清空原有数据，插入新数据并重绘
        dataTableInstance.clear().rows.add(res.data).draw();
    }).fail(function () {
        // 请求失败清空表格，可根据需求添加错误提示
        dataTableInstance.clear().draw();
    }).always(function () {
        // 释放请求锁
        isRequesting = false;
    });
}

关键修改说明 #

• 缓存DataTable实例，无需每次操作都重复查询DOM获取实例，性能更优
• 增加防抖逻辑，减少用户输入过程中的无效请求，降低服务器压力
• 增加请求锁，避免短时间内多次触发请求导致的数据渲染顺序错乱
• 兼容接口返回JSON字符串和JSON对象两种格式，避免解析报错
• 增加请求异常处理，避免请求失败时表格无响应

内容的提问来源于stack exchange，提问作者kemalkaancetindag