datatable 自定义搜索框 + 汉化

最新推荐文章于 2025-06-06 09:01:20 发布

james_laughing

最新推荐文章于 2025-06-06 09:01:20 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： wordpress 文章标签： wordpress 搜索 search 汉化

本文链接：https://blog.youkuaiyun.com/james_laughing/article/details/89068892

wordpress 专栏收录该内容

80 篇文章

订阅专栏

本文介绍如何利用jQuery和HTML创建一个带有搜索功能的数据表格。通过JavaScript代码实现了对表格数据的实时搜索，同时提供了搜索框的占位符提示，并定制了多种国际化语言设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

 <input type="text" id="my_news_search" class="" placeholder="搜索站内新闻">
<button class="" id="my_news_search_btn" type="button">搜索</button>

<script>




$(document).ready( function () {

	$('#table_id_example').DataTable({

	 "fnPreDrawCallback": function( oSettings ) {
        $('.dataTables_filter input').attr({'name':'search','placeholder': '搜索站内新闻公告'});//提示
    },

    language: {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});


	var table = $('#table_id_example').DataTable();



$('#my_news_search').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

$('#my_news_search_btn').on( 'onclick', function () {
    table.search( this.value ).draw();
} );

} );
</script>