Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

datatable_custom

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

datatable_custom

基于dataTables的样式修改及分页自定义。

  • 0.0.4
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

项目说明

基于dataTables的样式修改及分页自定义。

使用

引入dataTables的js和css。

再引入当前css文件下的custom-dataTables.css文件以及js文件夹下的pagination-custom.js

配置公共的config,代码如下:

$.extend( $.fn.dataTable.defaults, {
    "scrollX": true,
    "order": [],
    "dom": 'rt<"bottom"ipl>',
    "pageLength": 5,
    "lengthMenu": [ [5, 10, 15], ["5条/页", "10条/页", "15条/页"] ],
    "language": {
        "sLengthMenu":   "_MENU_",
    },
    "pagingType": "custom",
    "infoCallback": function( settings, start, end, max, total, pre ) {
        return '当前第 '+ parseInt(start, 10) +' 到 '+ parseInt(end, 10) +' 条,总共'+ parseInt(total, 10) +'条';
    },
    "headerCallback": function( thead, data, start, end, display ) {
        $(thead).find('th').each(function (i, elem) {
            var $this = $(elem);
            if ($this.find("i").length === 0) {
                var html = $this.html();
                $this.html(html + '<i></i>');
            }
        })
    }
} );

这里可能会根据具体需要,对pageLengthlengthMenu做出调整。

随后就可以愉快地使用了。

$('#example').DataTable( {
    // data: data,
    //使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
    //data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ],
    scrollY: 300,
    "columnDefs": [
        {
            "targets": [ 0, 1, 2 ],
            "orderable": false
        }
    ]
});

Demo

运行根目录下的index.html即可以看到效果。

FAQs

Package last updated on 04 May 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc