jQuery DataTables搜索功能异常：仅重载无结果，新增数据无响应

1. 移除自定义搜索事件，避免内置功能冲突 #

你开启了serverSide: true，DataTables会自动生成搜索框并处理后端搜索请求，无需手动绑定.form-control的keyup事件。自定义事件可能和内置逻辑冲突，引发页面异常重载，直接删除这段代码：

$('.form-control').on('keyup', function () {
    table.search(this.value).draw();
});

如果确实需要自定义搜索框，要阻止表单默认提交行为（若输入框在表单内）：

$('.form-control').on('keyup', function (e) {
    e.preventDefault();
    table.search(this.value).draw();
});

2. 修正Table ID的语法错误 #

你的table ID末尾有多余空格：id="producttable "，虽当前用类选择器初始化，但可能引发后续选择器问题，建议修正为：

<table id="producttable" class="table">

3. 新增数据后手动触发表格重载 #

新增数据不会自动刷新表格，需在新增成功的回调逻辑中主动调用重载方法：

// 示例：新增数据AJAX请求成功后执行
table.ajax.reload();

4. 简化初始化配置（可选） #

初始化代码中searching: true和bFilter: true功能重复，bFilter是旧版写法，保留一个即可：

var table = $(".table").DataTable({
    'processing': true,
    'serverSide': true,
    'searching': true,
    'bSort': true,
    'iDisplayLength': 5,
    'ajax': {
        'url': mp_ajax + '?action=ptable'
    },
    "columns": [
        {"data": "id_product"},
        {"data": "name"},
        {"data": "price"}
    ]
});

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