Keep reading and coding.
🇨🇳 Guangzhou China・🚀 Fullstack Engineer
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Home Page: https://bootstrap-table.com/
License: MIT License
Keep reading and coding.
🇨🇳 Guangzhou China・🚀 Fullstack Engineer
queryParams: function(params) {
this.url = 'url.json?' + $.param(params); // 改成自己需要的 url
return {};
}
please add refresh button in pagination that easy can refresh current page data
please add pagination, sort, search and other operation with html5's pushState and update the browser's URL and browser's back- and forward-buttons for SEO optimazation
First of all, thank you so much for this wonderful plugin! Almost everything I wanted my "tables" to show / look, is possible with just one plugin.
I'm seeing one behavior that might be a bit annoying for a user. The entire table data is duplicated behind the table header. I'm sorry, I'm not able to figure out the right words to explain what I'm trying to convey. So, let's use examples.
Head over to http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html - now use the browser search option (typically ctrl+f
) and search for "mergeCells". You'll start seeing 2 results:
Can this be avoided / fixed? I would (at least) expect the table header to be static and not scroll.
I've gotten this message in the devtools on all three major browsers, in bootstrap-table.js, specifically at line 300 (as of my pull just now):
this.data.sort(function(a, b) {
//and etc.
The verbage of the error in IE11 is "Object doesn't support property or method 'sort'"
thanks @wenzhixin;
please add formatter function in the row level for fully customize row view and that can create deference and advanced rows.
When you have a table with server side processing, the search field becomes massive while pressing keys.
Each key you press sends a request to server to "update" the data. You can press keys like arrow left/right, home, end, etc, this keys has no affect to the search value but they currently fires a request.
I suggest to add two behaviors:
e.g. something like:
<th data-field="download" data-formatter="app.downloadFormatter">
<span class="glyphicon glyphicon-download"></span>
</th>
文档上写的排序都是LOCAL SORT,能像分页一样增加server sort吗?
Hello,
The "data-formatter" has a bug. If i have "data-formatter" in one column, no matter what, and i change the visible columns in the "data-show-columns" menu, some columns changes the format with the "data-formatter" even without the "data-formatter" property.
please add footer that can show aggregation such as count,sum,avg and others functions for and calculate with custom function
Hi Bro,
I need your help, first tanks for your contribution is excelent. second i want show my data from mysql to your table with php, how can i do it? and i want fixed the first column, can you explain me how do that? thanks...
LeonardoF5
From: Colombia
When I use the bootstrap tabl, I want to achieve the effect of bootstrap table checkbox radio, although radiio radio can achieve the effect, but no later rdio select a record there is no way to cancel selected for this record
please add option to table when click row, select or checked checkbox or radiobox
When you are at a page greater than the max pages resulted by a search, you will see no records.
Scene:
please add index argument in formatter function for when that have row number column or other advanced operations
Dear Wenzhixin,
How can we assign custom data attributes to table headings, becuase whenever I assign it, after table load these are just vanished.
Regards,
Dear Wenzhixin,
Would you like to guide as currently I am using xditable.js plugin for inline editing, but I have facing the issue as I have not found a cell/td click event to capture the click and then execute the inline update/change. Moreover if I use row click event, check event is triggered as well. Am I doing somthing wrong?
Regards,
Dear Wenzhixin,
Would you like to explain in detail the response handler function, if you could do this with ASP.Net MVC, this will be a plus.
Regards,
There is a bug using pagination whe you targer bootstrap 2.3.
In 2.3 we need an extra div around the ul where the class pagination should be put on.
this could be solved in the initPagination function
Not sure if this is intended functionality, but I thought it worth mentioning that when I put some (javascript generated) integers into the table, they weren't searchable.
After some thought, I figured I'd convert them to strings, and they were then searchable.
This plugin is amazing, and I appreciate it!
Dear wenzhixin,
How to select multiple items from different pages. For every page checkbox gets refreshed and I could only see selected items from that page. If I want to select multiple items from different pages how to do it.
For example view the docs by mobile.
當 對 name 進行排列時
名稱後面的數字排列不正確
例如 test1test20test20
小到大 test1
大到小 正常應該 test20~test1
可是您的為 test9 ......
I have a table with two columns, "assigned" and "complete," per row, and turning the cell into a checkbox is overwriting the column names and just putting a checkbox in that th tag. And I apologize for opening three issues in barely over 24 hours...
<th data-field="COMPLETE" data-title="Complete" data-align="left" data-sortable="false" data-checkbox="true">Complete</th>
<th data-field="ASSIGNED" data-title="Assigned" data-align="left" data-sortable="false" data-checkbox="true">Assigned</th>
Anyway to make the search box non case sensitive? Thx
Lets say i want the searchValue to be selected from my own inputfield. So bootstrap-table can be implemented more easily.Same goes for pagination, I want to specify the parent container where the pagination should appear.
getSelections returns the result list as if checkboxes are used. It just adds-up any item that was previously radio-selected.
To reproduce:
Hi. First let me thank you for the wonderful work. A real time saver !.
Currently the width in Column properties accept only number values.
I actually wanted to control the width of td width using "col-md-x" as shown here
http://stackoverflow.com/questions/15115052/twitter-bootstrap-how-to-set-up-width-of-td
Is it possible?
Regards
dbl click event would be great, also, I would like to highlight the row when clicked, but onClickRow does not has the element as parameters. is it possible to send both row data and row element.
Hello,
I need to disable a column from "data-show-columns=true", like the last column.
If i put HTML in header it hides when it renders the table.
Hello,
The column width is being processed by the body content but if the header is smaller, it cuts and puts ... at the end. I know that there is a "data-width" property but the automatic process could do the job.
Example: I have a column named "Identification" and the content is "1, 2, 3, 4", the header is "I...".
hi... how to add features, column filter??
Very nice that one can specify the json file. However, what if the format is not just an array of objects? Is this supported? For example:
{
"docs": [
{"Movie_name": "Goodfellas","Movie_year": 1990},
{"Movie_name": "Meet the Fockers","Movie_year": 2004},
{"Movie_name": "Shark Tale","Movie_year": 2004},
{"Movie_name": "Raging Bull","Movie_year": 1980},
{"Movie_name": "Untouchables, The","Movie_year": 1987},
{"Movie_name": "Godfather: Part II, The","Movie_year": 1974},
{"Movie_name": "Meet the Parents","Movie_year": 2000},
{"Movie_name": "Deer Hunter, The", "Movie_year": 1978}
]
}
please add view option on header can easy choice view between grid or card
please add css and classes parameters to column formater function that can customize columns cell layout.
The rows at table after search refers to wrong rows position when at “click-row.bs.table” events.
I meant, If I have the A, B, C and D data, when I Search for “B” it will show as if it was row “A” on “click-row.bs.table” events.
Any idea how to fix it?
When you use sortName
and sortOrder
option, for example: http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#sort-table
the first time you click the Item Name
, it doesn't sort.
I use MVC and have the need to be able to display data in the table and also have an edit button displayed as the last column.
Can you help.
Regards,
Matt
thank you for share this project. please add search box for search on columns with data-search on column option and server side search. and refresh method that can refresh table client side so if add refresh button is very good.
Hey @wenzhixin, thanks for making this bootstrap table, it's quite useful!
I'm having one issue when I initialize by doing $('#table').bootstrapTable();
I have two rows of headers for some reason. Note, I did not use data-url="data1.json"
in my html.
Any help would be great! Thanks.
All of my attempts at using Bootstrap Table formatting classes have been ignored in all 3 major browsers. Is this intended behavior or have I erred? If it is working as intended, can this be....fixed or made optional, somehow? Part of why I switched to this plugin from a pure-jQuery plugin was because I believed I could apply standard Bootstrap 3 table classes,
<div class="table-responsive">
<table data-toggle="table" data-sort-name="EM_ID" data-method="get" data-pagination="true" data-url=<cfoutput>"API call with JSON return"</cfoutput> data-undefined-text="---" data-striped="true" data-search="true" data-classes="table table-primary table-striped table-hover table-bordered table-condensed" class="table table-primary table-striped table-hover table-bordered table-condensed" id="panelistReportTable">
</div>
When using data instead of url to load the data, the table will have duplicate headers.
please add processing indicator with customization for long time operations such as server side pagination ,search and sort
selected row with checkbox or radiobox very good but add other option to selected row with click and highlight current row.finaly get selected row with getSelections function
I want to pass data to the bootstrap table using jquery, in the example docs it is given as
$('#table').bootstrapTable({
url: 'data.json'
});
,
But I'll call my service and get json object. how can i pass the json Object to the data-Url.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.