bootstrap-table

最新推荐文章于 2024-08-13 16:15:07 发布

格斗冠军

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量317

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Star_trails/article/details/121823551

版权

bootstrap javascript ecmascript

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstraptable</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <!-- <script src="https://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script> -->
    <script>
        // $(function() {
        //     $(".table").bootstrapTable({
        //        search: true,
        //         pagination: false,
        //         pageSize: 15,
        //         pageList: [5, 10, 15, 20],
        //         showColumns: true,
        //         showRefresh: false,
        //         showToggle: true,
        //         locale: "zh-CN",
        //         striped: true
        // {'name':'刘备',"merit":"哈哈"},
        //         {'name':'刘备',"merit":"哈哈"},
        //         {'name':'刘备',"merit":"哈哈"},
        //         {'name':'刘备',"merit":"哈哈"}
        // }); 
        // })
    </script>
</head>
<body>
    <div class="table-demo">
        <table class="table"></table>
    </div>
    <script>
        $(function(){
            var data_1= [
                {name:'刘备',merit:"哈哈"},
                {name:'张飞',merit:"哈哈"},
                {name:'孙权',merit:"哈哈"},
                {name:'关羽',merit:"哈哈"},
                {name:'曹操',merit:"哈哈"},
                {name:'张辽',merit:"哈哈"},
                {name:'吕布',merit:"哈哈"},
                {name:'马超',merit:"哈哈"},
                {name:'许褚',merit:"哈哈"},
                ];
            var columns_1 = [
                {
                    // field:'name',
                    // titile:'姓名'
                    field:"name",  
                    title: '姓名'
                },
                {
                    field:'merit',
                    title:'特长'
                }
                ];
            $('.table').bootstrapTable({
                data:data_1,
                height: 400,
                // classes: "table table-bordered table-striped table-sm table-dark",
                // showColumns: true, 
                // columns:columns_1,
                columns:columns_1,
                pagination:true,  //是否显示表格的底部工具栏分页条
                // detailView:true,
                // cardView:true,
                paginationDetailHAlign:'right',  //选择每页显示记录条数的按钮位置
                paginationHAlign:'left',     //底部的页码数按钮
                paginationPreText:'上一页',   //底部的页码数按钮的最左边的符号
                paginationNextText:'下一页',   //底部的页码数按钮的最右边的符号
                pageList:[3,5,10],    //即可以选择”每页显示10/25/50/100条记录”，用于设置选择每页显示的条数
                escape:true,
                pageSize:3,  //每页的默认显示条数
                search: true,     //是否显示搜索框
                // showFooter:true, //是否显示表尾
                showRefresh:true,  //是否显示刷新按钮
                showToggle:true,  //是否显示切换视角按钮
                // showPaginationSwitch:true,
                buttonsAlign:'left',  //工具栏按钮的位置
                //  rowStyle(row, index){  //设置行样式
                //     console.log(row);
                //      if(index==1 && row.name=='张飞'){
                //          console.log(row);
                //          return { classes: 'text-nowrap another-class',
                //              css: {'color': 'blue', 'font-size': '50px'}
                //          }
                //      } 
                //      return {
                //          css: {
                //              color: '#333333'
                //          }
                //      }
                //  },
                 cellStyle(value, row, index, field){ 
                     console.log(value,row,index,field)
                     if(index==1 && field=='name'){
                         return {
                         css: {
                             color: 'red'
                         }
                     } 
                     }
                     return { 
                         classes: 'text-nowrap another-class', 
                         css: {'color': '#333333'} };               
                 }
                

            })
            $('button[name="refresh"]').text("刷新")
            $('button[name="toggle"]').text("切换视角")
            $('button[name="toggle"]').click(function(){
                $('button[name="toggle"]').text("切换视角")
            })

            
            // document.getElementsByName('refresh').innerText
            // console.log(one)
        })
        
    </script>
</body>
</html>

格斗冠军

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>boo
复制链接

扫一扫