wenzhixin / bootstrap-table-examples

Bootstrap table examples

bootstrap-table-examples

Bootstrap Table Docs

Bootstrap Table Examples

jsFiddle Examples

CRUD Example

Local develop

To develop bootstrap-table and bootstrap-table-examples locally please run:

mkdir bootstrap-table-dev
cd bootstrap-table-dev
git clone https://github.com/wenzhixin/bootstrap-table
git clone https://github.com/wenzhixin/bootstrap-table-examples

cd bootstrap-table
yarn && yarn css:build:src

cd ..
yarn add http-server
npx http-server

And then open: http://localhost:8081/bootstrap-table-examples

Local server

cd bootstrap-table-examples
yarn
cd server
node app.js

reporting issues

All issues need to be submitted to the main project, not this examples repo.

Please read: CONTRIBUTING.md#bug-reports and post issue to issue, thanks!

bootstrap-table-examples's Issues

how to add class and other things in <td> and <tr> tag by inline?

I need add like this "< tr data-value1="" data-value2="" data-value3="" >< td class="success"> < /td >< /tr >

How can i get table data from check box in table

hi,
i am using your example it's a very helpful
here is my code for table

{% extends "base.html" %}
{% load sekizai_tags %}
{% load menu_tags %}
{% load cms_tags %}
{% load cms_tags sekizai_tags menu_tags %}
{% load menu_tags %}
{% load i18n %}

{% block base_content %}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/dist/bootstrap-table.min.css">
    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/filter/bootstrap-table-filter.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/bootstrap-table-filter.css">
    <script src="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/bootstrap-table-filter.js"></script>
    <script src="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/ext/bs-table.js"></script>

    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/export/bootstrap-table-export.js"></script>
    <script type="text/javascript" src="https://rawgit.com/kayalshri/tableExport.jquery.plugin/master/tableExport.js"></script>
    <script type="text/javascript" src="https://rawgit.com/kayalshri/tableExport.jquery.plugin/master/jquery.base64.js"></script>
    <script type="text/javascript" src="http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/bootstrap-table-filter.js"></script>
    <script type="text/javascript" src="http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/ext/bs-table.js"></script>


</head>

<center><font size="4" color="#1A4067" align="center">Dashboard List</font></center><br><br>

  <div id="toolbar">
        <button id="button" class="btn btn-default">getSelections</button>

    </div>  


    <table
        id="tbl"
        data-click-to-select="true"
        data-toolbar="#filter-bar"
        data-show-toggle="true"
        data-show-columns="true"
        data-select-item-name="selectItemName"
        data-pagination="true"
        data-show-export="true"
        data-export-types="['json', 'csv']"
        data-click-to-select="true"
        data-search="true"
        >
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="id">id</th>
                <th data-field="studentname" data-align="right" data-sortable="true">Student Name</th>
                <th data-field="status" data-align="center" data-sortable="true">Status</th>
                <th>Details</th>



            </tr>
        </thead>
        <tbody>   
           {% get_current_language as LANGUAGE_CODE %}
            {% for e in enrolls %}

                {% if e.student_name and LANGUAGE_CODE == e.language_code %}
                    <tr data-toggle="modal" data-id="{{ e.id }}" id="1">

                         <td data-field="state" data-checkbox="true"></td>
                         <td data-field="id" id="id" name ="id" style="border:1px solid black;">{{ e.id }}</a></td>
                         <td data-field="name" style="border:1px solid black;">{{ e.student_name }}</a></td>
                         <!--<td style="border:1px solid black;">{% if e.enroll_status == 'Draft' or e.enroll_status == 'Submit' %}<a href='{{ e.get_absolute_url }}'>{% endif %}{{ e.student_name }}</a></td>-->
                        <!--<td style="border:1px solid black;">{{ e.course }}</td>-->
                        <td  style="border:1px solid black;">{{ e.enroll_status }}</td>
                        <td>{% if e.enroll_status == 'Draft' or e.enroll_status == 'Submit' %}<a href='{{ e.get_absolute_url }}'>{% endif %}View Details</a></td>

                    </tr>
                {% endif %}    

        {% endfor %}
        </tbody>
    </table>
        <button id="show" class="btn btn-default">Show checked</button>
        <button class="btn btn-default" id="update-row" data-method="updateRow">
    Update Row
</button>
        <button class="btn btn-default" id="get-selections">
    Get Selections
</button>
        {% url 'dashboard_list'%}

        <form action="{% url 'update_subject_enroll' 2 'Approved'%}" method="post">{% csrf_token %}
            <input type="hidden" id="ids" name="ids" value="1,2,3" class="input-block-level">
        <input type="hidden" id="values" name="values" value="Approved" class="input-block-level">

        <button class="btn btn-large btn-primary" type="submit" name="btnSubmit" type="btnSubmit">Submit</button>


<!--<pre style="margin-top: 30px" id="log"></pre>-->

    <script type="text/javascript">
        $(function() {
            $('#tbl').bootstrapTable();

            $('#filter-bar').bootstrapTableFilter({
                connectTo: '#tbl',
                onAll: function(name, args) {
                    var d = new Date();
                    $('#log').prepend(d.toLocaleString() + ': ' + name + "\n");
                },
                onSubmit: function(data) {
                    var data = $('#filter-bar').bootstrapTableFilter('getData');
                    var d = new Date();
                    $('#log').prepend(d.toLocaleString() + ': ' + JSON.stringify(data) + "\n");
                }
            });

        });

    </script>

<script>
 var $table = $('#tbl');
$(function () {
    $('#show').click(function () {
        var str1 = "";
        var dict = [];
        var index = [];
        $('input[name="selectItemName"]:checked').each(function (e, row, element) {



            index.push($(this).data('index'));


        });
        alert('Checked row index: ' + index.join(', '));
    });
});
</script>

<script>

    $('#get-selections').click(function() {
        //var dataFieldValue = $('#tbl-methods-table tr[data-checkbox="true"]').data('data-id');
         var dataFieldValue = $(event.target).closest('tr').data('id');
        alert (dataFieldValue)
    });
</script>

<script> var $table = $('#tbl'), $button = $('#button'); ``` $(function () { $button.click(function () { var a = $table.bootstrapTable('getSelections'); a[0] "value of a" + a; alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'))); }); }); ``` </script>

{% endblock %}

in above table how can i get table data like all rows "id" or "student_name" of cheked row on submit button click
i try a lot but cant find solution
pls help!!!
Thanks in advance!!!!

Running Bootstrap Table Example

Hi all

is there a .md to test the example after clone?

Add rows

Hello

is the any way to dynamically insert new data in the table ?
-> I mean add rows

getData method does not return proper data content when is embedded in another element

When a value in the table is also a link that points to another webpage, the getData method returns the full content on the cell, i.e. the full html anchor, and not just the value. The getData method should only return the data content of the table. This is useful for when you want to write the table data to a file, or load the data to do manipulations.

NO Support Bootstrap 3.3.2?

Click outside select does not close selects

Using the code downloaded from GitHub I noticed my select boxes were not closing when you click outside the select area. They were only closing when you click the generated button.

I copied the JS from the docs page and it started working...

Using Ajax with server side search

Hi,

I asked similar question before, but didn't get any answer so I am trying to rephrase it. I am using Ajax to get data from the server. My code for setting up table looks as follows:

$table.bootstrapTable({
    cache: false,
    classes: 'table table-no-bordered',
    ajax: "ajaxRequest",
    sidePagination: "server",
    pagination: true,
    search: true,
    height: 460,
    showRefresh: true,
    clickToSelect: false,
    singleSelect: false,
    rowStyle: "formatRow",
    method: 'POST',
    contentType: 'application/json',
    queryParamsType: "limit",
    queryParams: "setParameters",
    ajaxOptions: {
        url: '/retrieveData',
        data: { "uID": uID, "price": lPrice, "total": lTotal },
        type: 'POST',
        async: true,
        dataType: 'json',
        success: function (data) {
            console.log("test: " + data);
        }
    },
    columns: [{
        field: 'check1',
        radio: true,
        visible: true,
        formatter: { disabled: false }
    }, {
        field: 'price',
        colspan: 1,
        sortable: true,
        width: "10%",
        events: 'positionEvents',
        formatter: positionStartFormatter,
    }, {
        field: 'total',
        colspan: 1,
        width: "10%",
        events: 'positionEvents',
        formatter: positionEndFormatter,
    }, {
        field: 'comments,
        title: 'Comment',
        searchable: true,
        colspan: 1
    }, {
        field: 'discount',
        title: 'Discount',
        colspan: 1,
        width: "10%",
        events: 'operateEvents',
        formatter: operateFormatter
    }]
});


function ajaxRequest(params) {
    var objRows;
    console.log(params.data);
    $.ajax({
        url: '/retrieveData',
        data: {
            "uID": uID, "price": lPrice, "total": lTotal
        },
        type: 'POST',
        async: true,
        dataType: 'json',
        success: function (data) {
            console.log("POST data: " + data);
             params.success(
                {
                     rows: DATA
                }
        );
            params.complete();
        },
        error: function (xhr, txtStatus, thrownError) {
            throw thrownError;
            if (xhr.status != 0) {
                throw thrownError;
            };
         }
    });


function setParameters(params) {
    return {
        limit: 50,
        sort: "'" + params.sort + "'",
        offset: 0,
        order: "'" + params.order + "'",
        search: "'" + params.search + "'",
    }
}

My previous question was about ajaxOptions object as whatever I set there had no influence on the call to the server. For example, I specified type:'POST' but the call contained default GET. I solved the problem by using the ajaxRequest function to reset the parameters as above. This works. However currently I have a problem with Search which might be related - it still calls 'GET' default route. What I was able to figure out during debugging - as I start typing text in the search box, there is a call going to the server to refresh data, that contains the searched text as one of the parameters (using ajaxRequest function above). This is fine. However, as soon as I press Enter button on the search box, the server side fails as it goes to a non-existing route using GET. Why is taking the default GET instead of using ajaxRequest? I am sure I missed/mixed something with the table parameters, but I cannot figure out what. Any help would be very appreciated.

clear all filters

How do I clear/reset all filters in the filter-control extension on button click?

How do I change the sort order of the items in the filter extension selects?

Love the product! Works great.
Thanks!

how to get flatJSON list from remote url

I'm trying to get data into bootstrap table with flatJSON plugin with data-url to a remote link returning a json list, but it doesn't load anything.

I tried to made the json list a local archive .json and set data-url to this and it works perfectly.

I have to do something different to make it work with remote url?

JSON

[{"row":{"id":1,"natureza3":"400000000","descricao_natureza3":"RECEITA","valor_inicial":"0,00","valor_realizado":"86.263,16"}},{"row":{"id":2,"natureza3":"411000000","descricao_natureza3":"RECEITA TRIBUTARIA","valor_inicial":"3.786.904.258,00","valor_realizado":"945.522.770,17"}},{"row":{"id":3,"natureza3":"413000000","descricao_natureza3":"RECEITA PATRIMONIAL","valor_inicial":"49.090.388,00","valor_realizado":"27.406.540,51"}},{"row":{"id":4,"natureza3":"414000000","descricao_natureza3":"RECEITA AGROPECUARIA","valor_inicial":"10.000,00","valor_realizado":"0,00"}},{"row":{"id":5,"natureza3":"416000000","descricao_natureza3":"RECEITA DE SERVICOS","valor_inicial":"143.687.606,00","valor_realizado":"38.812.264,90"}},{"row":{"id":6,"natureza3":"417000000","descricao_natureza3":"TRANSFERENCIAS CORRENTES","valor_inicial":"4.346.932.471,00","valor_realizado":"1.333.283.660,04"}},{"row":{"id":7,"natureza3":"419000000","descricao_natureza3":"OUTRAS RECEITAS CORRENTES","valor_inicial":"104.701.326,00","valor_realizado":"15.976.885,88"}},{"row":{"id":8,"natureza3":"421000000","descricao_natureza3":"OPERACOES DE CREDITO","valor_inicial":"309.699.729,00","valor_realizado":"0,00"}},{"row":{"id":9,"natureza3":"422000000","descricao_natureza3":"ALIENACAO DE BENS","valor_inicial":"2.224.598,00","valor_realizado":"100.927,01"}},{"row":{"id":10,"natureza3":"424000000","descricao_natureza3":"TRANSFERENCIAS DE CAPITAL","valor_inicial":"440.315.310,00","valor_realizado":"156.027.522,33"}},{"row":{"id":11,"natureza3":"425000000","descricao_natureza3":"OUTRAS RECEITAS DE CAPITAL","valor_inicial":"265.633.805,00","valor_realizado":"63,24"}},{"row":{"id":12,"natureza3":"471000000","descricao_natureza3":"RECEITA TRIBUTARIA - INTRA-ORCAMENTARIA","valor_inicial":"360.000,00","valor_realizado":"102.535,24"}},{"row":{"id":13,"natureza3":"476000000","descricao_natureza3":"RECEITAS DE SERVICOS - INTRA-ORCAMENTARIA","valor_inicial":"2.358.591,00","valor_realizado":"72.281,08"}},{"row":{"id":14,"natureza3":"477000000","descricao_natureza3":"TRANSFERENCIAS CORRENTES - INTRA-ORCAMENTARIA","valor_inicial":"5.396.558,00","valor_realizado":"400.000,00"}},{"row":{"id":15,"natureza3":"479000000","descricao_natureza3":"OUTRAS RECEITAS CORRENTES INTRA ORCAMENTARIAS","valor_inicial":"2.300.000,00","valor_realizado":"0,00"}},{"row":{"id":16,"natureza3":"484000000","descricao_natureza3":"TRANSFERENCIAS DE CAPITAL","valor_inicial":"1.600.000,00","valor_realizado":"0,00"}},{"row":{"id":17,"natureza3":"491000000","descricao_natureza3":"DEDUCOES DA RECEITA TRIB.P/FORMACAO DO FUNDEB","valor_inicial":"-501.664.481,00","valor_realizado":"-150.513.302,18"}},{"row":{"id":18,"natureza3":"497000000","descricao_natureza3":"DEDUCAO DA REC.DE TRANSF.P/FORMACAO DO FUNDEB","valor_inicial":"-640.717.476,00","valor_realizado":"-212.229.087,51"}}]

HTML

<!table id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://localhost/consultas/consulta_receita.php">
<!thead>
<!tr>
<!th data-field="row.descricao_natureza3" data-sortable="true">Name
<!th data-field="row.natureza3" data-sortable="true">Stargazers
<!/tr>
<!/thead>
<!table>

pagination-custom-text doesn't work

I set the pagination text by data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" and data-pagination-last-text="Last" but it still display "<< < > >>" on table, I use chrome and firefox.

If i click the button data is not updating properly. Please help me out

var data1 = [
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
},
{
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
},
{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
$(document).ready(function(){

var pushdata =[{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}];

$('#btnclick').click(function(){
data1.push({
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
});
$('#table-1').bootstrapTable({
data: data1
});

});

function dateFormatter(value) {
return moment(value).format('MM-DD-YYYY');
}

function runningFormatter(value, row, index) {
return index;
}
});

$(function () {
$('#table-1').bootstrapTable({
data: data1
});
});

Range datepicker filter control

Congratulations for the project. I wondering if its posible to add datepicker range filter control?

Thanks

X-editable extension not working

How can I get search string on current page?

I use search feature on this script. It works well when I type any words, it will be getting search results from server to display on bootstrap table. But I would like to get that search string for using on another script on my page...

I try to catch it by jQuery like this >> $("div.bootstrap-table div.fixed-table-toolbar div.search input.form-control div#inner-editor").text();

But it does not work, it returns as blank value.

Could anybody help me to solve this issue?

create server side

can help to understand this

Because the API: /examples/bootstrap_table/data is base on node server with the code: https://github.com/wenzhixin/blog/blob/master/routes/examples.js.

I create server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080);

to make the example as server, and run node server.js

still cannot fetch the data.json to the server

can help?

sort疑问

你好！
column上的sort事件有没有不通过再次查询的排序，只针对页面已有的元素

Why popover and tooltip does not work with bootstrap-table?

I use bootstrap-table with some bootstrap-popover and or tooltip. When i resize the window or use some table function (example: search or toggle or sort).Then the popover or tooltip does not work any more. (for example the tooltip become as a standard html tooltip.). What i miss? or it is some problem? Any help is welcome! I tried with a standard bootstrap table and i do not find this problem.

I just add a JSFiddle here test with tooltip and popover

http://jsfiddle.net/jipexu/8vgk5626/10/

Error to get my checkbox selected: getSelections get All my rows

I've try to remove a row from my Table, so when I click in my button remove, I get all the row id's, its mean that remove all my rows.

<div id="toolbar">
        <button id="remove" class="btn btn-danger" disabled>
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
 </div>
<table id="gruplac-table"
        data-toggle="table"
        data-toolbar="#toolbar"
        data-search="true"
        data-show-refresh="true"
        data-show-toggle="true"
        data-show-columns="true"
        data-show-export="true"
        data-show-pagination-switch="true"
        data-pagination="true">
        <thead>
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="id" data-sortable="true">Código Gruplac </th>
              <th>Nombre</th>
            </tr>
        </thead>
        <tbody>
        {% for entity in entities %}
            <tr data-index="{{loop.index}}">
                <td class="bs-checkbox"><input type="checkbox" name="btSelectItem" data-index="{{loop.index}}"></td>
                <td > {{ entity.id }} </td>
                <td>{{ entity.nombre }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

This is the code to handle the event on click of my button delete

  var $table = $('#gruplac-table');
  var $remove = $('#remove');

  $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
    $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
  }); 
  $remove.click(function () {
    var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    });
    console.log(ids);
    // $table.bootstrapTable('remove', {
    //   field: 'id',
    //   values: ids
    // });
    // $remove.prop('disabled', true);
  });

Create hidden input for each checkbox

Hi,

I am trying to create a hidden input inside of a form for each row that is checked and I want to insert the value of each hidden input with the ids that are from a hidden column.

Here is what i have so far:

.on('check.bs.table check-all.bs.table', function (row) {           
        var selects = $('#users-table').bootstrapTable('getSelections');
            ids = $.map(selects, function (row) {
                return row.id;                          
            });                 
                    var input = document.createElement("input");
            input.setAttribute('type', 'hidden');           
            input.setAttribute('name', 'delete['+ids+']');
            input.setAttribute("id", 'delete['+ids+']');            
            input.setAttribute('value', 'delete['+ids+']');         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  
        })

It is creating a new hidden input for each box that is checked like I want it to, but the problem I am having is that it is joining the ids together. Here is an example of whats happening:

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[3,2]" id="delete[3,2]" name="delete[3,2]" type="hidden">

What i want it to do is this:

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[2]" id="delete[2]" name="delete[2]" type="hidden">

Can you please help me with this?

Please publish to npm

Not a big deal either way but integrate/bsTable.js is fairly useful and I'd like to turn the wenzhixin/bootstrap-table-examples#b1f3912d in my package.json to a more readable v1.0.0. :)

reorder-rows plugin breaks tables without reorderableRows option

Example is here: https://jsfiddle.net/matus/9xw42d2e/1/
On line 68 I commented out possible fix

data-search: how to add wildcards to the search function

Hi
Can I somehow use wildcards for the search functionality within the table?

Thanks for your help
Andrea

toolbar按钮消失bug

当点击toolbar的第三个切换按钮时，表格变成列表显示，左边的删除按钮就消失了，再切换回来，还是看不到了，chrome浏览器

Search - can items be "OR'd" together in search box

I have a very large table that users can search for colors - such as BLUE, RED,GREEN,YELLOW.

Is there anyway a user could search for two or more items such as

BLUE || GOLD

to seach all rows that contain EITHER blue OR gold?

table高度问题(help)

怎样做到设置了table高度之后，如果所有的行高没有超过设置的高度就显示为当前所有行，如果超过了
table height就scroll，而不是即使是没超过table高度，整个table的高度还是显示为设置的高度，下面有一大堆空白。

how to use mutiple server side tables in a single webpage?

how to use mutiple server side tables in a single webpage?

Examples app listening at http://:::3000

Hi - sorry if this is a simple question but was trying to run the examples locally, I followed the instructions:

git clone https://github.com/wenzhixin/bootstrap-table-examples.git
cd bootstrap-table-examples
git submodule update --init
npm install
node app

However, the output from node app is:

Examples app listening at http://:::3000

That doesn't seem right to me. Am I missing something? Thanks.

Wrong parsing with data-page-list

/* I'm an idiot, this issue was reported in the wrong repository */
If the value being used for data-page-list doesn't contains '[' and ']' the parsing fails and wrong page sizes are displayed. See example url.
JSFiddle example: http://jsfiddle.net/e3nk137y/457/
For data-page-size="5, 10, 25, 50, 100, 200, 500" the dropdown of records per page shows: 0, 10, 25, 50, 100, 200, 50

I know that the documentation says that data-page-list should be defined as an array like [10, 25, 50 100] but you can also allow a string definition like "10, 25, 50, 100" (without [ and ]) to support different scenarios.

how to reload a table after a sort or filter.

Hi

I have a table that shows just 10 rows from a total list of 500.
I am only bringing back 10 rows from a SQL server as that is the page size.
when i do a sort or a filter I need to go back to the server and bring back the 10 rows out of the 500 with the filtered / sorted criteria.
i have this part working. the new sorted data is being returned.
How do get this new data into the table without destroying the table and then rebuilding it with the new data.
i do not want to have to re-select the column headings etc, just reload the table with the new data containing the changed filter / sort criteria.
I do not wish to bring the complete 500 rows of data back either.

thanks

lawrie

This working fine with > 20 millions rows?

I have more than 20 millions rows. Bootstrap table working fine with it?

export table button does not allow to specify the filename of the file.

The export table functionality does not allow to specify the filename, of the saved file.

Reorder Rows

After reorder, the values remain same as it was before re-order. Item4 row object stays as Item1 if i move 4 to 1.

I get Wrong Files downloaded

When i download these examples as zip i get folder assets\bootstrap-table without any files due to which examples are not working please help
here is screenshot of my webpage when i open any example

Pagination error

If the pageSize equal the result json's total rows, it will show "Uncaught TypeError: undefined is not a function" at console, it's wrong at bootstrap-table.js:991.

how to customize search box in bootstrap-table?

I need to customize search box (style) and custom message when the table is empty.how to do that in javascript?

[Nice to have] Generate PDF

It will be great to be able to generate a PDF of the table

How can I find function parameters of extensions' events? e.g. onEditableSave

Could you please give me an example of how to send PUT request on editable is saved?

Are there 2 ways?

1. using events: foo
2. using $table.on('editable-save.bs.table', foo);

Thx!

No matching records found

Hi
I just built the bootstrap-table-example but when I load it in chrome I got this message in the table
No matching records found

I notice in the HTML line 48
data-url="/examples/bootstrap_table/data">
but there is not examples folder in the repo.
I also tried to copy the file in http://wenzhixin.net.cn/examples/bootstrap_table/data in the same path, but the table is not loading any data.
Do you have any advice?
Thanks
Marco

Contributors

Hello @wenzhixin Can we contribute in this repo? Thanks a lot!

Data-Filter Control Extension

how to use data-filter-control extension with set option not in table?
i mean not set "data-filter-control" attribute at tag "table" but at bootstraptable option
$('#myData').bootstrapTable(
{ filter-control: true }
);

and with the other setting / option?

sorry my english is not so good

how to customize export option in bootstrap-table?

I need download button instead dropdown and the download type should be only the csv format and the data in csv should have particular columns only not all columns.Please tell me how to do this?

Struggling with Ajax implementation

Hi,

first of all bootstrap-table is fantastic. However I am struggling with implementation of the ajax option. I was wondering if you would have any other example as the one that is posted is not clear. The reason I am asking is the use of ajaxOptions object. When I set it in JS using your example as the basis, at least some members are not passed down the the ajax function (ajaxRequest). I am setting up type: 'put', but the params object in ajaxRequest function shows it as 'get'. Obviously I could ignore completely the ajaxOptions object and reset the params object down in the function, but I was just wondering if it is a legitimate problem or I misunderstand use of ajaxOptions.

need more detailed example of php for server side pagination

Anybody know where i can find one ?

Add reset width and height example.

Not able to maintain the state of checkbox while paging

Hi,
I want to show table with checkbox column. Also want to maintain the checkbox state while changed the paging using paging.But i not able achieve the same. Please do help to get same.

when clicking check-box, getting exception of _[func]. please find the attached image for error.

Below is code using

Note: bootstrap-table version :1.8.1

<script src="~/Scripts/jquery-2.1.3.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/bootstrap-table-master/dist/bootstrap-table.js"></script>

	ID	Description	Exam_Type	DifficultyLevel	NoOFQuestion

<script type="text/javascript"> var selections = []; var $table = $('#table-javascript'); $(function () { $table.bootstrapTable(); $table.on('check.bs.table check-all.bs.table ' + 'uncheck.bs.table uncheck-all.bs.table', function (e, rows) { var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) { return row.Id; }), func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; selections = _[func](selections, ids); }); }); function responseHandler(res) { debugger; $.each(res.rows, function (i, row) { row.state = $.inArray(row.Id, selections) !== -1; }); return res; }  </script>

search on invisible data columns does not work properly

Searching on columns that are invisible does not work. When the columns are data-switchable, but data-visible is set to False, they are not searchable, and they should be.

problem in get index on check box check

hi, i am using bootstrap table in my django template

my template is

'''
{% extends "base.html" %}
{% load sekizai_tags %}
{% load menu_tags %}
{% load cms_tags %}
{% load cms_tags sekizai_tags menu_tags %}
{% load menu_tags %}

{% block base_content %}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/dist/bootstrap-table.min.css">
    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/filter/bootstrap-table-filter.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/bootstrap-table-filter.css">
    <script src="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/bootstrap-table-filter.js"></script>
    <script src="https://rawgit.com/lukaskral/bootstrap-table-filter/master/src/ext/bs-table.js"></script>

    <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/export/bootstrap-table-export.js"></script>
    <script type="text/javascript" src="https://rawgit.com/kayalshri/tableExport.jquery.plugin/master/tableExport.js"></script>
    <script type="text/javascript" src="https://rawgit.com/kayalshri/tableExport.jquery.plugin/master/jquery.base64.js"></script>
    <script type="text/javascript" src="http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/bootstrap-table-filter.js"></script>
    <script type="text/javascript" src="http://wenzhixin.net.cn/p/bootstrap-table/docs/assets/table-filter/ext/bs-table.js"></script>


</head>





<center><font size="4" color="#1A4067" align="center">Dashboard List</font></center><br><br>

    <table
        id="tbl"
        data-click-to-select="true"
        data-toolbar="#filter-bar"
        data-show-toggle="true"
        data-show-columns="true"
        data-pagination="true"
        data-show-export="true"
        data-export-types="['json', 'csv']"
        >
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="studentname" data-align="right" data-sortable="true">Student Name</th>
                <th data-field="status" data-align="center" data-sortable="true">Status</th>
                <th>Details</th>



            </tr>
        </thead>
        <tbody>   
            {% for e in enrolls %}

                {% if e.student_name %}
                    <tr>
                        <td></td>
                         <!--<td data-field="state" data-checkbox="true"></td>-->
                         <td style="border:1px solid black;">{{ e.student_name }}-{{ e.id }}</a></td>
                         <!--<td style="border:1px solid black;">{% if e.enroll_status == 'Draft' or e.enroll_status == 'Submit' %}<a href='{{ e.get_absolute_url }}'>{% endif %}{{ e.student_name }}</a></td>-->
                        <!--<td style="border:1px solid black;">{{ e.course }}</td>-->
                        <td style="border:1px solid black;">{{ e.enroll_status }}</td>
                        <td>{% if e.enroll_status == 'Draft' or e.enroll_status == 'Submit' %}<a href='{{ e.get_absolute_url }}'>{% endif %}View Details</a></td>


                    </tr>
                {% endif %}    

    {% endfor %}
        </tbody>
    </table>
        <button id="show" class="btn btn-default">Show checked</button>
        <button class="btn btn-default" id="update-row" data-method="updateRow">
    Update Row
</button>
        <button class="btn btn-default" id="get-selections">
    Get Selections
</button>
<!--<pre style="margin-top: 30px" id="log"></pre>-->

    <script type="text/javascript">
        $(function() {
            $('#tbl').bootstrapTable();

            $('#filter-bar').bootstrapTableFilter({
                connectTo: '#tbl',
                onAll: function(name, args) {
                    var d = new Date();
                    $('#log').prepend(d.toLocaleString() + ': ' + name + "\n");
                },
                onSubmit: function(data) {
                    var data = $('#filter-bar').bootstrapTableFilter('getData');
                    var d = new Date();
                    $('#log').prepend(d.toLocaleString() + ': ' + JSON.stringify(data) + "\n");
                }
            });

        });

    </script>

 <script>
 var $table = $('#table');
$(function () {
    $('#show').click(function () {
        var index = [];
        $('input[name="selectItemName"]:checked').each(function () {
            index.push($(this).data('index'));
        });
        alert('Checked row index: ' + index.join(', '));
    });
});

</script> <script> $(function () { $('#table-methods').next().click(function () { $(this).hide();

        var id = 0,
            getRows = function () {
                var rows = [];

                for (var i = 0; i < 10; i++) {
                    rows.push({
                        id: id,
                        name: 'test' + id,
                        price: '$' + id
                    });
                    id++;
                }
                return rows;
            },
            // init table use data
            $table = $('#table-methods-table').bootstrapTable({
                data: getRows()
            });

        $('#get-selections').click(function () {
            alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
        });
        $('#get-data').click(function () {
            alert('current data: ' + JSON.stringify($table.bootstrapTable('getData')));
        });
        // This demonstrates utilizing the data-method attribute to use one 
        //     jQuery handler to execute multiple methods. 
        // ($this).data('method') retrieves the value of the data-method 
        //     attribute of the object that was clicked which is then passed to 
        //     the bootstrapTable function. 
        // Only the load and append methods require a parameter                                 
        $('#load-data, #append-data, #check-all, #uncheck-all, ' +
                '#show-loading, #hide-loading').click(function () {
            $table.bootstrapTable($(this).data('method'), getRows());
        });
        $('#refresh').click(function () {
            $table.bootstrapTable('refresh', {
                url: 'data1.json'
            });
        });
        $('#remove-data').click(function () {
            var selects = $table.bootstrapTable('getSelections');
                ids = $.map(selects, function (row) {
                    return row.id;
                });

            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        });
        $('#update-row').click(function () {
            $table.bootstrapTable('updateRow', {
                index: 1,
                row: {
                    name: 'test111111',
                    price: '$111111'
                }
            });
        });
        $('#merge-cells').click(function () {
            $table.bootstrapTable('mergeCells', {
                index: 1,
                field: 'name',
                colspan: 2,
                rowspan: 3
            })
        });
        $('#show-column, #hide-column').click(function () {
            $table.bootstrapTable($(this).data('method'), 'id');
        });
    });
});

</script>

{% endblock %}

'''
i try to get data of checked row but i am not able to get index
pls help!!!
thank in advance!!!

table row accordion

I would like to be able to show/hide a optional row.
like an accordion type effect.

anyone got an example working.

eg

<tr>
<td spancol="7"> </td>
</tr>

Using the examples project against the latest bootstrap-table commit

This project is using git submodule to get the latest bootstrap-table commits into the assets folder, i assume the intention was to be able to run samples against the latest commit on bootstrap-table. But all examples are referencing bootstrap-table files in node_modules, downloaded from the officially released version of bootstrap-table.

I'm asking because the angular samples don't work because the angular extension is not yet in the npm package used by all sample files.