I'm currently trying to change on a bootstrap table it's configurations dynamically, based on some user configurations stored in localStorage and reload it.
The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.
I took a look at the official documentation, and some questions in SO. And I tried to do it, as below:
var $table = $('#grd-fatura');
$table.bootstrapTable('refresh', {
pageSize: 2
});
(The localstorage.getItem block and rules were removed from above code for testing purposes.)
And here is my table code (note that some elements are in portuguese):
<table
id="grd-fatura" data-click-to-select="true" data-response-handler="responseHandler"
data-pagination="true" #*data-height="460"*# data-show-footer="true" data-search="true"
data-show-columns="true" data-cache="false" data-show-toggle="true" data-show-export="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true">Código</th>
<th data-field="estabelecimento" data-align="left" data-sortable="true">Estabelecimento</th>
<th data-field="historico" data-align="left" data-sortable="true">Histórico</th>
<th data-field="tipo" data-align="left" data-sortable="true">Tipo</th>
<th data-field="pessoa" data-align="left" data-sortable="true">Pessoa</th>
<th data-field="emissao" data-align="center" data-sortable="true">Emissão</th>
<th data-field="referencia" data-align="left" data-sortable="true">Referência</th>
<th data-field="situacao" data-align="left" data-sortable="true">Situação</th>
<th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador">Total</th>
</tr>
</thead>
</table>
The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at some examples, and could not find where I am going wrong. So, how do I dynamically change the Boostrap table settings? What I am doing wrong in the above code?
Note: I am using Bootstrap 3.
Try this:
$table.bootstrapTable('refresh', {
query: {pageSize: 2}
});
Related
I want to extract content from a table within a website that appears to be generated after the website loads using Python. Some excerpts from the html code of the website:
I believe this displays the table:
<table class="table table-condensed table-bordered hoverRowHand" id="contentTable">
<thead>
<tr>
<th width="5%"> </th>
<th width="10%">Date Uploaded</th>
<th width="10%">Survey ID</th>
<th width="5%">Airport ID</th>
<th width="20%">Airport</th>
<th width="10%">Survey Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And I believe running these scripts generates the contents for the table:
<script src="/global/js/nfdc-suite.js"></script>
<script src="/global/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="/global/js/date.js"></script>
<script src="/global/js/spin.min.js"></script>
<script src="/global/js/jquery.twbsPagination.js"></script>
<script src="/nfdcApps/include/main.js"></script>
<script src="/nfdcApps/services/publicData/uddfList-dt.js"></script>
<script src="/global/js/nfdcPublicDataTable.js"></script>
Simply getting the html of the website obviously does not provide any of the information I am looking for, since I believe it is first necessary to run the scripts which generate it.
Is this feasible to do with Python? Or is this something unreasonable to accomplish with Python.
Side note: If I use the "inspect element" tool in my Chrome browser I can see the content I am looking for.
I use bootstrap table for table management. I have a table with checkboxes, so I have used data-click-to-select = "true" I also have a search bar I used data-search = "true" When I select an item and I do a search I lose the item that was selected.
In the attached link an example: you select the first element "bootstrap-table" and after you put "b" in zone of search then the element will no longer be selected
1999
Fiddle
Any idea plz
You can use data-maintain-selected="true" to keep the selected checkbox.
Updated FIDDLE.
<table data-maintain-selected="true" data-toggle="table" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" data-click-to-select="true" data-search="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
</tr>
</thead>
</table>
You can read more about data-maintain-selected here.
data-maintain-meta-data="true"
...to maintain the following meta data on change page and search.
You can read more about data-maintain-selected here.
I have an Angularjs smart-table that has sort definitions set for each column, ie which direction.
What I want to ensure is that every time the page loads, the original sort direction is preserved, ideally to control with a variable. I have noticed with some pagination code I am doing that when you select page 2, the sort order changes sometimes so the second page you get doesn't relate to page 1.
How can I maintain control over what column and direction is being sorted and maintain that state?
<table st-table="displayedCollection" st-pipe="getModelRuns" st-sort="EXECUTIONPOOL" st-sort-default="reverse" st-safe-src="rowCollection" class="table table-condensed" ng-show="displayedCollection.length > 0">
<thead>
<tr>
<th st-sort="NAME" st-skip-natural="true"><i ng-class="getSortIcon('JobName')"></i> <a data-ng-href="#" style="white-space: nowrap">Job Name</a></th>
<th st-sort="CLOUDJOBNAME" st-skip-natural="true"><i ng-class="getSortIcon('CloudJobName')"></i> <a data-ng-href="#" style="white-space: nowrap">Cloud Job Name</a></th>
<th st-sort="MODELVERSION" st-skip-natural="true"><i ng-class="getSortIcon('ModelVersion')"></i> Model Version</th>
<th st-sort="RUNSTATUS" st-skip-natural="true"><i ng-class="getSortIcon('Status')"></i> Status</th>
<th st-sort="REQUESTEDAT" st-skip-natural="true" st-sort-default="reverse"><i ng-class="getSortIcon('Requested')"></i> Requested At</th>
<th st-sort="STARTEDAT" st-skip-natural="true" st-sort-default="reverse"><i ng-class="getSortIcon('Started')"></i> Started At</th>
<th st-sort="FINISHEDAT" st-skip-natural="true" st-sort-default="reverse"><i ng-class="getSortIcon('Finished')"></i> Finished At</th>
<th st-sort="REQUESTEDBY" st-skip-natural="true"><i ng-class="getSortIcon('RequestedBy')"></i> Requested By</th>
<th st-sort="EXECUTIONPOOL" st-skip-natural="true"><i ng-class="getSortIcon('ExecutionPool')"></i> Executed on Pool</th>
<th />
</tr>
</thead>
</table>
I think you asked for default ascending order in table, you can set like
st-sort-default="true"
but you have set reverse so its probably in reverse order for you.
I am using folowing library : http://bootstrap-table.wenzhixin.net.cn/documentation/
I load json objects into this table which works fine, but now here comes the problem. I want to be able to sort columns.
My Json layout as folows :
[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]
<table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
<thead>
<tr>
<th data-field="Name">Name</th>
<th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
</tr>
</thead>
</table>
I want to show TotalFormatted data, but i want to sort this column with Total property, since TotalFormatted cant be used for that. In the documentation i saw the following :
data-sort-name : Provide a customizable sort-name, not the default
sort-name in the header, or the field name of the column. For example,
a column might display the value of fieldName of "html" such as
"abc", but a fieldName to sort
is "content" with the value of "abc".
but how ever data is not sorted correctly, has anyone exprienced this or have i misunderstood something?
Actually data-sort-name doesn't work that way. the main intention of data-sort-name option is to control the default sorting of the table data.
for the data-sort-name option to work with default sorting it needs to point to one of the data-field attribute of the column in the table.
note : In short data-field is like a an id added to each column, which the data-sort-name option refers to sort the table on load.
To understand this better, here is an example with code from Bootstrap site
try changing the data-sort-name to one of the columns data-field value and execute the code, you will understand what I just explained above.
HTML Code:
<table data-toggle="table"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-sort-name="stargazers_count"
data-sort-order="desc">
<thead>
<tr>
<th data-field="name"
data-sortable="true">
Name
</th>
<th data-field="stargazers_count"
data-sortable="true">
Stars
</th>
<th data-field="forks_count"
data-sortable="true">
Forks
</th>
<th data-field="description"
data-sortable="true">
Description
</th>
</tr>
</thead>
Live demo # JSFIDDLE: http://jsfiddle.net/dreamweiver/ptxj8Lao/
Why does the search box disappear when adding new columns in the HTML of datatables? I'm trying to convert something to jquery and data tables, but cannot figure out how to add new data besides for data in the pre-existing settings that I got when I downloaded the program. The website isn't very clear on how to add new columns...
http://datatables.net/examples/api/multi_filter.html
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>new column</th>
</tr>
</thead>
<tbody>
Is it possible to load whole table with all columns and just hide certain columns? That would be most efficient.