精华内容
下载资源
问答
  • Bootstrap 表格

    2014-04-30 07:55:00
    Bootstrap 的简单表格实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Table with twitter bootstrap</title> <meta...

    Bootstrap 的简单表格实例

    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Example of Table with twitter bootstrap</title> 
    <meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples.">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
    </head>
    <body>
    <table class="table">
            <thead>
              <tr>
                <th>Student-ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Grade</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>001</td>
                <td>Rammohan </td>
                <td>Reddy</td>
                <td>A+</td>
              </tr>
              <tr>
                <td>002</td>
                <td>Smita</td>
                <td>Pallod</td>
                <td>A</td>
              </tr>
              <tr>
                <td>003</td>
                <td>Rabindranath</td>
                <td>Sen</td>
                <td>A+</td>
              </tr>
            </tbody>
          </table>
    </body>
    </html>

    效果如图:

     

    Bootstrap 的斑马表格实例

    和简单实例不同的是table的class名改为 <table class="table table-striped">即可

    效果如图:

    转载于:https://www.cnblogs.com/LT0314/p/3700535.html

    展开全文
  • jQuery bootstrap带分页表格数据搜索筛选代码
  • bootstrap动态表格模板

    2018-09-23 13:22:50
    这个是bootstrap动态表格模板,非常酷,可以直接使用,包括筛选,分页,排序等
  • 在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果: 未进行搜索时,有394条记录: 在输入乘车码“1”和订单号“20150120”后,只有28条记录: 此处使用了两个筛选条件...

    在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果:

    未进行搜索时,有394条记录:

    在输入乘车码“1”和订单号“20150120”后,只有28条记录:

    此处使用了两个筛选条件:乘车码和订单号进行了模糊查询,从而大大减少了表格的记录数,以达到搜索的目的。

    HTML页面代码如下:

    <div id="toolbar">
        <div class="my-container">
            <label class="myLabel-content">乘车码:</label>
            <div class="myText-content">
                <input id="busNo" type="text" class="form-control" placeholder="输入乘车码">
            </div>
        </div>
        <div class="my-container">
            <label class="myLabel-content">订单号:</label>
            <div class="myText-content">
                <input id="orderId" type="text" class="form-control" placeholder="输入订单号">
            </div>
        </div>
        <div class="myBtn-content">
            <button id="search" type="button" class="btn btn-primary">搜索</button>
            <button id="reset" type="button" class="btn btn-default">重置</button>
        </div>
    </div>
    <table id="testTable" data-toggle="table" data-height="530"
           data-striped="true" data-classes="table table-hover" data-toolbar="#toolbar"
           data-side-pagination="server" data-pagination="true" data-page-list="[10,20,50,100]">
        <thead>
            <tr>
                <th class="col-md-3" data-field="BusNo" data-align="center">乘车码</th>
                <th class="col-md-5" data-field="OrderId" data-align="center">订单号</th>
                <th class="col-md-4" data-field="OrderDate" data-align="center" data-formatter="FormatDateTime">订单日期</th>
            </tr>
        </thead>
    </table>
    View Code

    可以注意到:在table中并没有URL,因为在查询的过程中参数可以是变化的,会在JavaScript中对URL做动态的绑定。JavaScript代码如下:

    $(function () {
                $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
                $('#search').click(function () {
                    var busNo = $('#busNo').val();
                    var orderId = $('#orderId').val();
                    $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2?orderId=' + orderId + '&busNo=' +busNo });
                });
                $('#reset').click(function() {
                    $('#busNo').val('');
                    $('#orderId').val('');
                    $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
                });
            });
    View Code

    其中三个函数对表格的URL进行了设定:

      1. 初始化页面时;

      2. 点击“搜索”按钮,对URL添加了两个参数:“orderId”和“busNo”,稍后在后台代码中会对这两个参数进行处理;

      3. 点击“重置”按钮,将清空查询条件,重新查询表格数据。

    后台代码如下:

    public JsonResult GetPaginationData2(string orderId, string busNo)
            {
                var offset = Request.Params["offset"] == null ? 0 : int.Parse(Request.Params["offset"]);
                var limit = Request.Params["limit"] == null ? 10 : int.Parse(Request.Params["limit"]);
    
                using (var context = new TestEntities())
                {
                    int count;
                    var q = (from a in context.Tickets
                        join b in context.Order on a.OrderId equals b.Id
                        select new
                        {
                            BusNo = a.BusNumber,
                            OrderId = b.Id,
                            OrderDate = b.OrderDateTime,
                        }).Where(
                            t => (string.IsNullOrEmpty(orderId) || t.OrderId.Contains(orderId)) &&
                                (string.IsNullOrEmpty(busNo) || t.BusNo.Contains(busNo)))
                        .Distinct()
                        .Pagination(offset, limit, out count);
                    var data = q.ToList();
                    return Json(new {rows = data, total = count}, JsonRequestBehavior.AllowGet);
                }
            }
    View Code

    下面是程序中会引用的CSS样式,供参考:

    .my-container {
        float: left;
        display: inline-block;
        margin-right:30px;
    }
    
    .myLabel-content ,.myText-content,.myBtn-content{
        float: left;
        display: inline-block;
        margin-left: 10px;
    }
    .myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
        height: 30px;
        font-size: 12px;
    }
    .myBtn-content .btn {
        margin-bottom: 10px;
    }
    View Code

     

    转载于:https://www.cnblogs.com/ChrisLee2011/p/4290541.html

    展开全文
  • Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板,具有筛选、分页、排序等功能,全屏页面。表格制作精美,数据显示清晰合理,可直接应用于前端的开发。
  • bootstrap-table表格做条件筛选筛选出来的结果在table里用红色字体标识关键字

    //查询结果--关键字标识为红色

                $("#ValueItemTable").on('post-body.bs.table', function () {

                    var txtReportName = $("#ReportTempletelName").val();

                    var reg = new RegExp(txtReportName, 'ig');

                    var tableId = document.getElementById("ValueItemTable");


                    if (txtReportName != null) {


                        for (var i = 1; i < tableId.rows.length; i++) {

                            var bb = tableId.rows[i].cells[0].innerHTML;

                            var displayColor = '<span style="color:red">' + txtReportName + '</span>';

                            var cc = bb.replace(reg, displayColor);

                            tableId.rows[i].cells[0].innerHTML = cc;

                        }


                    }

                })

    展开全文
  • Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板,具有筛选、分页、排序等功能,非全屏页面。表格制作精美,数据显示清晰合理,可直接应用于前端的开发。
  • Bootstrap编辑表格插件

    千次下载 热门讨论 2015-10-16 20:10:11
    包含bootstrap可编辑表格、下拉框、日期三个控件,功能齐全,使用简单,用法请参见http://blog.csdn.net/lzxadsl
  • 我是现实一万多条数据 显示 每页十个 表格分页加载的时候 好像是每次都是重新请求的 有什么好的解决方法
  • bootstrap_下拉框筛选

    2015-08-19 12:04:15
    基于bootstrap的下拉框筛选,数据导入下拉框后,可输入数据查找筛选
  • Bootstrap-表格模板(动态满屏)【筛选+分页+排序】,适用于需要二次开发的程序员
  • //查询结果--关键字标识为红色 $("#ValueItemTable").on('post-body.bs.table', function () { var txtReportName = $("#ReportTempletelName").val(); var reg = new RegExp(tx...

    //查询结果--关键字标识为红色
             

    $("#table").on('post-body.bs.table', function () {
                    var txtname = $("#name").val();
                    var reg = new RegExp(txtname , 'ig');
                    if (txtname != '' && txtname != null) {
                        $("#table tr").each(function (rowIndex) {
                            var zl_name = $(this).find("td").eq(1).text();
                            var zl_content = $(this).find("td").eq(2).text();
                            var zlnameColor = '<span style="color:red">' + txtname + '</span>';
                            var zlcontentColor = '<span style="color:red">' + txtkjname + '</span>';
                            var newzl_name = zl_name.replace(reg, zlnameColor);
                            var newzl_content = zl_content.replace(reg, zlcontentColor);
                            $(this).find("td").eq(1).html(newzl_name);
                            $(this).find("td").eq(2).html(newzl_content);
                        });
                    }
                });


     

    展开全文
  • 目标:根据两个下拉框和一个输入框的内容,对BootStrap Table实现组合筛选。 思路:1.从json文件中,提取表格数据(前端提取),并存储为一个数组对象;2.遍历这个数组,提取用来对比的属性的值;3.与下拉框和输入框...
  • 依赖:vue+bootstrapVue 表格的全选和全部选以及部分选中切换功能。 组件代码: <template> <div style="width: 90%;margin: 10px auto;"> <b-table :items="items" :fields="fields" caption-top&...
  • 获取表格行数 $("#tableId").find("td").length; 获取当前行的列数 $("#exampleTable tr").each(function(rowIndex) { // 遍历表格行 var colLength = $(this).find("td").length; // 获取当前行的列数 ...
  • bootstraptable表格基本

    2016-11-02 22:29:00
    function tableint(){$("#tableFromData").bootstrapTable({url:BASE_URL+"/do/front/main_xp.do",//请求后台的URL(*)striped: true,//是否显示行间隔色cache: false, //是否使用缓存,默认为true,所...
  • 近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此时我要按年龄进行筛选,刚...
  •  顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气。  本文主要参考这位博主的系列文章:  ...
  • Ajax Bootstrap列表动态渲染数据及点击事件,数据筛选渲染表格 1 效果图 点击后点击隐藏同级元素,再次点击恢复: 点击数据后,表格重新ajax获取筛选数据,再次渲染效果图: 原始表 点击后: 2 代码 $.each...
  • Bootstrap-table 表头筛选控件

    千次阅读 2020-11-18 14:23:29
    Bootstrap-table 表头筛选控件,根据Bootstrap-table API,在表头添加筛选排序,支持文本搜索,数值搜索,日期搜索,单选和复选。 依赖js jQuery,Bootstrap,Bootstrap-table,select2 筛选类型说明 1. 文本类型...
  • } } ], "oLanguage": { 'sSearch': '数据筛选:', "sLengthMenu": "每页显示 _MENU_ 项记录", "sZeroRecords": "没有符合项件的数据...", "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据;总共有 _TOTAL_ 项...
  • 1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="css/bootstrap-editable.css" rel=...--表格单元格...
  • bootstrap-table表格导出功能学习分享

    万次阅读 热门讨论 2017-03-07 09:07:09
    bootstrap-table官网-》拓展模块中有导出模块的详细介绍。网址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 点击home按钮进入github官方文档,会看到导出使用的插件是bootstrap-table-export....
  •  ②bootstrap-table使用需要下载对应的css和js插件  ③具体详情还需查看api文档 二、前端代码 1 <div class="table-responsive"> 2 <table id="table" class="text-nowrap"> <...
  • 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页。 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能。 首先表格的数据源...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,081
精华内容 832
关键字:

bootstrap表格筛选