Bootstrap Table - Demo 1

Bootstrap table with a number of tweaks and additions, notably custom filter code and code to select rows by itemId and jump to the page containing them

by Stephen Irving

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
<div class="container body-content">
    
    <div class="row page-header-box">
        <div class="col-xs-10">
            <h3>Customer List 
                <span style="font-style:normal;font-size:13px;margin-left:10px;color:#999;">Select a Customer, click filter-btn or type in your selection and jump. </span></h3>
        </div>
        
    </div>

        <div class="row" style="margin-bottom:0;  display:none;">
            <div class="col-lg-12" style="margin-bottom:0;">
                <p style="margin-bottom:10px;font-size:13px;">DEMO: use the buttons below to jump to items.</p>
                <p>
                    
                </p>
            </div>
        </div>
        
<div class="row">
    <div class="col-lg-12">
    <div id="Customer-custom-toolbar" style=""> 
        <button class="btn btn-default btn-sm pull-left" type="button" name="filtertoggle" title="Toggle Filters" style="margin-right:5px;"><i class="glyphicon glyphicon-filter icon-filter"></i></button>
        
        <div class="input-group input-group-sm " style='width:250px;'>
          <input type="text" class="form-control input-sm "  id='jsfiddle-jump-input'  placeholder="CustomerID">
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm" id="jsfiddle-jump-btn"  type="button" title="Type in customerID then click to jump" style='margin-top: -4px;'>Jump!</button>
          </span>
        </div>
    </div>
    <table class="table XXtable-striped XXtable-hover table-condensed my-sortable-table XXbootstrap-table-with-borders XXbootstrap-table-with-soft-borders"...

CSS

/*!
 * Bootstrap v3.3.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=9ce4b34b1247728582bb)
 * Config saved to config.json and https://gist.github.com/9ce4b34b1247728582bb
 */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075)}.btn-default:active,.btn-primary:active,.btn-success:active,.btn-info:active,.btn-warning:active,.btn-danger:active,.btn-default.active,.btn-primary.active,.btn-success.active,.btn-info.active,.btn-warning.active,.btn-danger.active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-default .badge,.btn-primary .badge,.btn-success .badge,.btn-info .badge,.btn-warning .badge,.btn-danger .badge{text-shadow:none}.btn:active,.btn.active{background-image:none}.btn-default{background-image:-webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);background-image:-o-linear-gradient(top, #fff 0, #e0e0e0 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#e0e0e0));background-image:linear-gradient(to bottom, #fff 0, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#dbdbdb;text-shadow:0 1px 0 #fff;border-color:#ccc}.btn-default:hover,.btn-default:focus{background-color:#e0e0e0;background-position:0...

JavaScript

s


/// NOTE TODO - bug where if pageSize 10 - jumpTo 5 causes wrong page - see code in initPagination to fix


    var global = { app_options: { prefix: "" , url_group: "" },  baseUrl: "/" };
    global.prefix = "Customer";


    var jsLookups = {"CountryID":{"1":"Australia","2":"United Kingdom","3":"USA","4":"India","5":"China","6":"Turkey"},"CustomerID":{"1":"Carson","2":"Jones","3":"Barry","4":"Bill","5":"Polly","6":"Trevor","7":"Ivan","8":"Larry","9":"Molly","10":"Mark"},"DealerID":{"1":"Australia","2":"Italy","3":"USA 1 (Except California)","4":"USA 2 (California)","5":"UK","6":"Germany","7":"Denmark","8":"Benelux"}}

    

$(document).ready(function () {
    _setup_sortable_tables();
    refresh_autofills();
    $('#jsfiddle-jump-btn').on('click',function(e){ 
        e.preventDefault(); 
        var $table = $('#Customer-table')
        var jump_itemid = $('#jsfiddle-jump-input').val();
        console.info('!!!jumping to item!!!',jump_itemid);
        $table.bootstrapTable('setActiveItem', {'CustomerID':jump_itemid});
        $table.data('jumpToRowOnce', jump_itemid);
        /// NOTE - workaround, but could also just trigger search or other approaches, as desired code in initPagination
        $table.bootstrapTable('jsfiddleRefreshPagination');
    });

});
    
/*

This jsfiddle has been provided as per a request by https://github.com/djhvscf 
in https://github.com/wenzhixin/bootstrap-table/issues/725

This js includes:
    1. my own version of bootstrap-table.js
    2. new js file called sortable-table-app.dev.js
    3. Some Parts of my general scripts.js file for this project

This is from an EARLY ALPHA project - it is rough, there are many comments, and it is not completed.
Some TODO notes done, some not, some comments detail different than was chosen - but most accurate.

I welcome any and all feedback as to improvements or suggestions, as i do hope to clean up this code 
and maybe even migrate certains changes into extensions or similar - if this...