Skip to content

mochetts/bootstrap-table-filter

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap table filters

This is an extension for Bootstrap table module which aim is to provide data tables with filtering feature.

Usage

Simple example

First of all, you need to include Bootstrap and this extension:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="../src/stylesheet" href="bootstrap-table-filter.css">

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="../src/bootstrap-table-filter.js"></script>

Then you can create placeholder element and initialize it with javascript as a filter:

<div id="filter-bar"></div>
<script type="javascript">
    $(function() {
        $('#filter-bar').bootstrapTableFilter({
            filters:[
                {
                    field: 'id',    // field identifier
                    label: 'ID',    // filter label
                    type: 'range'   // filter type
                },
                {
                    field: 'label',
                    label: 'Label',
                    type: 'search',
                    enabled: true   // filter is visible by default
                },
                {
                    field: 'role',
                    label: 'Role',
                    type: 'select',
                    values: [
                        {id: 'ROLE_ANONYMOUS', label: 'Anonymous'},
                        {id: 'ROLE_USER', label: 'User'},
                        {id: 'ROLE_ADMIN', label: 'Admin'}
                    ],
                },
                {
                    field: 'username',
                    label: 'User Name',
                    type: 'search'
                },
                {
                    field: 'city',
                    label: 'City',
                    type: 'ajaxSelect',
                    source: 'http://example.com/get-cities.php'
                }
            ],
            onSubmit: function() {
                var data = $('#filter-bar').bootstrapTableFilter('getData');
                console.log(data);
            }
        });
    });
</script>

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%