datatable 自定义搜索框 + 汉化
程序员文章站
2022-05-29 12:08:20
...
HTML
<input type="text" id="my_news_search" class="" placeholder="搜索站内新闻">
<button class="" id="my_news_search_btn" type="button">搜索</button>
JS
<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>
上一篇: Node.js、NPM以及CNPM安装
下一篇: 安装Node.js和npm
推荐阅读
-
WPF自定义搜索框代码分享
-
WPF自定义搜索框代码分享
-
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
-
MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
-
Flutter自定义搜索框效果
-
js自定义的可分类可搜索的下拉框组件
-
datatable 自定义搜索框 + 汉化
-
Android自定义View实现搜索框(SearchView)功能
-
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
-
MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框