gridjs实现带搜索排序分页的自适应响应式表格效果代码

代码语言:html

所属分类:表格

代码描述:gridjs实现带搜索排序分页的自适应响应式表格效果代码

代码标签: gridjs 搜索 排序 分页 自适应 响应式 表格

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gridjs.umd.js"></script>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mermaid.min.css">
</head>

<body>
    <div id="table"></div>

    <script type="text/javascript">
        var grid = new gridjs.Grid({
          // columns: ["Name", "Email", "Phone"],
            columns: [
              { 
                name: 'Name',
                hidden: false,
              },
              'Email',
              'Phone',
           ],
          search: true,
          sort: true,
          data: [
            ["John Paul George Ringo", "john@example.com", "(353) 01 222 3333"],
            ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
            ["Eoin", "eo3n@yahoo.com", "(05) 10 878 5554"],
            ["Nisen", "nis900@gmail.com", "313 333 1923"],
            ["Jisen", "jis900@gmail.com", "313 333 1924"].........完整代码请登录后点击上方下载按钮下载查看

网友评论0