美文网首页
DataTable的dtoptions

DataTable的dtoptions

作者: Whisper_X | 来源:发表于2019-04-02 11:01 被阅读0次

自定义表格的dtOptions,并应用,在withLanguage下更改语言配置

$scope.dtOptions = DTOptionsBuilder.newOptions()
                    .withLanguage({
                        lengthMenu: $translate.instant('dataTable_display')+' <select style="height: 25px;width: 50px">'+
                            '<option value="5">5</option>'+
                            '<option value="10">10</option>'+
                            '<option value="20">20</option>'+
                            '<option value="30">30</option>'+
                            '<option value="40">40</option>'+
                            '<option value="50">50</option>'+
                            '<option value="-1">'+$translate.instant('dataTable_all')+'</option>'+
                            '</select>' + $translate.instant('dataTable_records'),
                        search: '<span >'+$translate.instant('dataTable_search')+':</span>',//右上角的搜索文本,可以写html标签

                        paginate: {//分页的样式内容。
                            previous: $translate.instant('dataTable_previous'),
                            next: $translate.instant('dataTable_next')
                        },
                        zeroRecords: $translate.instant('dataTable_zeroRecords'),//table tbody内容为空时,tbody的内容。
                        //下面三者构成了总体的左下角的内容。
                        info: $translate.instant('dataTable_info'),//"总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。
                        infoEmpty: $translate.instant('dataTable_infoEmpty'),//筛选为空时左下角的显示。
                        infoFiltered: ""//筛选之后的左下角筛选提示,
                    })
                    .withDOM('<"html5buttons"B>lTfgitp')
                    .withButtons([
                        {extend: 'copy'},
                        {extend: 'csv',title: 'Port Scanning'},
                        {extend: 'excel', title: 'Port Scanning'},
                        {extend: 'pdf', title: 'Port Scanning'},
                    ]);

在HTML页面引用dtOptions

 <table datatable="ng" name="portTable" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">

相关文章

网友评论

      本文标题:DataTable的dtoptions

      本文链接:https://www.haomeiwen.com/subject/uhuwbqtx.html