Improving filter control extension

Default options:

• [x] filterControl
• [x] filterControlVisible
• [x] onColumnSearch
• [x] onCreatedControls
• [x] alignmentSelectControlOptions:
• [x] filterTemplate
• [x] disableControlWhenSearch (removed)
• [x] searchOnEnterKey
• [x] showFilterControlSwitch
• [x] filterControlContainer

Column options:

• [x] filterControl // input
• [x] filterControl //select
• [x] filterControl // datepicker
• [x] filterDataCollector
• [x] filterData
• [x] filterDatepickerOptions
• [x] filterStrictSearch
• [x] filterStartsWithSearch
• [x] filterControlPlaceholder
• [x] filterDefault
• [x] filterOrderBy // asc
• [x] filterOrderBy // desc

Scenarios

• [x] When height is not set //input
• [x] When height is set // input
• [x] When height is not set // select
• [x] When height is set // select
• [x] When height is not set // datetimepicker
• [x] When height is set // datetimepicker
• [x] Show Columns when height is not set
• [x] Show Columns when height is set

Integrations

• [x] Cookie integration
• [x] ~~MultipleSelect with basic configuration~~
• [ ] ~~MultipleSelect when height is set (Facing css issue. See https://github.com/wenzhixin/bootstrap-table/pull/5583#issuecomment-821907389)~~
• [x] ~~MultipleSelect when height is not set~~
• [ ] ~~MultipleSelect when multiple is set (Facing css issue. See https://github.com/wenzhixin/bootstrap-table/pull/5583#issuecomment-821907389)~~

Update docs

• [x] Add/Remove documentation

Fix https://github.com/wenzhixin/bootstrap-table/issues/5541 (https://live.bootstrap-table.com/code/djhvscf/9665) Fix https://github.com/wenzhixin/bootstrap-table/issues/5588 (https://live.bootstrap-table.com/code/djhvscf/9666) Fix https://github.com/wenzhixin/bootstrap-table/issues/4998 (https://live.bootstrap-table.com/code/djhvscf/9667) Fix https://github.com/wenzhixin/bootstrap-table/issues/5468 (https://live.bootstrap-table.com/code/djhvscf/9690) Fix #5684 (https://live.bootstrap-table.com/code/djhvscf/9691) Fix https://github.com/wenzhixin/bootstrap-table/issues/4984 (https://live.bootstrap-table.com/code/djhvscf/9692) ~~Remove from scope https://github.com/wenzhixin/bootstrap-table/issues/5573.~~ See https://github.com/wenzhixin/bootstrap-table/issues/5968 Fix https://github.com/wenzhixin/bootstrap-table/issues/5446 (https://live.bootstrap-table.com/code/djhvscf/7411) ~~Remove from scope https://github.com/wenzhixin/bootstrap-table/issues/3298~~ Fix https://github.com/wenzhixin/bootstrap-table/issues/5146 (https://live.bootstrap-table.com/code/djhvscf/9694) Fix https://github.com/wenzhixin/bootstrap-table/issues/5690 (https://live.bootstrap-table.com/code/djhvscf/7438) Fix https://github.com/wenzhixin/bootstrap-table/issues/5572 (https://live.bootstrap-table.com/code/djhvscf/7445) Fix #5713 (https://live.bootstrap-table.com/code/djhvscf/9695) ~~Remove from scope https://github.com/wenzhixin/bootstrap-table/issues/5848~~ Fix https://github.com/wenzhixin/bootstrap-table/issues/5960 (https://live.bootstrap-table.com/code/djhvscf/9696) Fix https://github.com/wenzhixin/bootstrap-table/issues/5774 (https://live.bootstrap-table.com/code/djhvscf/9719) Fix https://github.com/wenzhixin/bootstrap-table/issues/5820 (https://live.bootstrap-table.com/code/djhvscf/9720) Fix https://github.com/wenzhixin/bootstrap-table/issues/5828 (https://live.bootstrap-table.com/code/djhvscf/9721) Fix https://github.com/wenzhixin/bootstrap-table/issues/5833 (https://live.bootstrap-table.com/code/djhvscf/9722) Fix https://github.com/wenzhixin/bootstrap-table/issues/5859 (https://live.bootstrap-table.com/code/djhvscf/9723) Fix https://github.com/wenzhixin/bootstrap-table/issues/5630 (https://live.bootstrap-table.com/code/djhvscf/9726) Fix https://github.com/wenzhixin/bootstrap-table/issues/5687 (https://live.bootstrap-table.com/code/djhvscf/9863) Fix https://github.com/wenzhixin/bootstrap-table/issues/6004 (https://live.bootstrap-table.com/code/UtechtDustin/10038)

Hello, i'm new on Github

i have to make a boostrap table with sorting/pagin/filtering lot of datas in ASP MVC application.

i found boostrap-table and it look great !

i have a problem when i add data-pagination="true" and data-side-pagination="server" but the table is empty or "No matching records found". without paging it working.

this is my controller

public JsonResult JsonGrid() { List resultats = uow.Repository().GetAlls().OrderByDescending(e => e.DateResultat).ToList();

        List<ResultatViewModel> ListeResultatViewModel = new List<ResultatViewModel>();
        foreach (var result in resultats)
        {

            ResultatViewModel resultatViewModel = new ResultatViewModel();

            resultatViewModel.PMRQTOTM = result.PMRQTOTM;
            resultatViewModel.PMID = result.PMID;
            resultatViewModel.PMRQ = result.PMRQ;

            ListeResultatViewModel.Add(resultatViewModel);
        }

        return Json(ListeResultatViewModel, JsonRequestBehavior.AllowGet);

}

My PartialView with my tab

table id="gridTable" data-toggle="table" data-url="/Resultats/JsonGrid" data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-height="300"> thead tr th data-sortable="true" data-field="Flag">PEC th> th data-field="PMRQTOTM">PMRQTOTM th> th data-field="PMRQ">PMRQ th> tr thead table>

and my main view

div id="Render">@Html.Partial("Grille", Model)div

Thanks !!

fix #4364

• [x] Accent Neutralise
• [x] Addrbar
• [x] Auto Refresh
• [x] Cookie
• [x] Copy Rows
• [x] Defer Url
• [x] Editable
• [x] Export
• [x] Filter Control
• [x] Fixed Columns
• [x] Group By V2
• [x] I18n Enhance
• [x] Key Events
• [x] Mobile
• [x] Multiple Sort
• [x] Page Jump To
• [x] Print
• [x] Reorder Columns
• [x] Reorder Rows
• [x] Resizable
• [x] Sticky Header
• [x] Toolbar
• [x] Treegrid

I have a data: [{"id":404,"description":"PowerEdge 6300","price":7500,"onhand":16,"supplierId":302, "suppliers":[{"name":"DELL","webSite":"http://dell.com"}]}

i want to get suppliers.name field, how do i get that data field ?

$table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });

getIdSelections方法只能获得当前页面的选择，但是翻页后就会丢失之前保存的数据，我看到您的示例代码中给予了提示，但是具体怎么实现保存用户所有的复选框选择还是没有思路，能否给予点指引呢

Hi. I'm new here. I just switched my pagination over to server-side, with the default parameters, as indicated on the example page, and a bunch of javascript related things aren't working.

• My table of 32 rows displays all the rows in one table, with no pages. It also now returns at the bottom

'Showing 1 to 0 of 0 rows' , with no page controls on the right-hand side.

My table is set set up like

<table class='sastable' id='table' data-toggle='table' data-classes='table table-condensed table-bordered' data-sort-name="{{'plate' if stage=='3d' else 'mjd'}}" data-sort-order='asc'
    data-show-columns='true' data-pagination='true' data-search='true' pageSize='25' 
    data-select-item-name='input' data-toolbar='#toolbar' data-id-field='id' 
    data-side-pagination='server' data-page-list="[10, 25, 50, 100]" name='sastable'>
 </table>

Am I missing something in the setup to activate it? I could not find another issue related to this one.

• The column sorting no longer works anymore.
  • The search is also not working. I updated my bootstrap-table-flatJSON.js as indicated in this thread https://github.com/wenzhixin/bootstrap-table/issues/434, but this did not fix the problem.

Am I missing some javascript somewhere to get the server-side pagination set up properly?

Thanks for your help.

What I want to do in the future or have already completed.

• [x] Rebuild all source code to ES6.
  • [x] Extensions
    • [x] accent-neutralise
    • [x] addrbar
    • [x] auto-refresh
    • [x] cookie
    • [x] copy-rows
    • [x] defer-url
    • [x] editable
    • [x] export
    • [x] filter-control
    • [x] fixed-columns
    • [x] ~~group-by~~
    • [x] group-by-v2
    • [x] i18n-enhance
    • [x] key-events
    • [x] mobile
    • [x] ~~multi-column-toggle~~
    • [x] ~~multiple-search~~
    • [x] ~~multiple-selection-row~~
    • [x] multiple-sort
    • [x] natural-sorting
    • [x] page-jump-to
    • [x] pipeline
    • [x] print
    • [x] reorder-columns
    • [x] reorder-rows
    • [x] resizable
    • [x] ~~select2-filter~~
    • [x] sticky-header
    • [x] toolbar
    • [x] ~~tree-column~~
    • [x] treegrid
  • [x] Locales
  • [x] bootstrap-table.js
• [x] Rebuild the website, deploy to GitHub Pages and add Algolia search support. (100%)
• [x] Add some of the most widely used CSS frameworks. (100%)
• [x] Check all table options are working and add examples. (100%)
• [x] Check all column options are working and add examples. (100%)
• [x] Check all methods are working and add examples. (100%)
• [x] Check all locales https://github.com/wenzhixin/bootstrap-table/commit/13624d984b410ea4436bfb234ef3addb6fc9833b. (100%)
• [x] Check all events are working. (100%)
• [x] Check all extensions are working, remove extensions that don't need or don't work. (100%)
• [x] Add examples for all Extensions (100%)
• [x] Review and clean up all PR.
• [x] #4234: Clean up most of the remaining issues.
• [x] Use the module to refactor the code to remove IIFE.
• [x] Use virtual scrolling to improve performance. Trying to have been basically implemented, for example, 20,000 data can work properly.
• [x] Support vue.js.
• [x] Released version 1.15.2.

• [ ] Remove the dependency on jQuery.
  • [ ] Extensions
    • [ ] accent-neutralise
    • [ ] addrbar
    • [ ] auto-refresh
    • [ ] cookie
    • [ ] copy-rows
    • [ ] defer-url
    • [ ] editable
    • [ ] export
    • [ ] filter-control
    • [ ] fixed-columns
    • [x] ~~group-by~~
    • [ ] group-by-v2
    • [ ] i18n-enhance
    • [ ] key-events
    • [ ] mobile
    • [x] ~~multi-column-toggle~~
    • [x] ~~multiple-search~~
    • [x] ~~multiple-selection-row~~
    • [ ] multiple-sort
    • [x] natural-sorting
    • [ ] page-jump-to
    • [ ] pipeline
    • [ ] print
    • [ ] reorder-columns
    • [ ] reorder-rows
    • [ ] resizable
    • [x] ~~select2-filter~~
    • [ ] sticky-header
    • [ ] toolbar
    • [ ] ~~tree-column~~
    • [ ] treegrid
  • [ ] Locales
  • [ ] bootstrap-table.js
• [ ] Released version 2.0, now many people have reported that the bootstrap-table is often not searchable, so consider changing the name, such as ui-table or other better name.
• [ ] Consider whether to support react and angular, not very familiar.

Hi togeher,

My Files

nodes.json: http://paste.debian.net/hidden/85d8c632/ getData.html: http://paste.debian.net/hidden/b9df2a32/ welcome.html http://paste.debian.net/hidden/10c94b9b/

Problem

No matching records found!

Anyone ideas?

Is there a way to initialize a bootstrap-table to be sorted by multiple columns?

Suppose you have a table like this:

| Target Date | Priority | | --- | --- | | 2/2/2002 | Medium | | 1/1/2013 | High | | 1/1/2012 | High | | 1/1/2014 | High |

I want the default view to look like this (sorted first by Priority descending, then Target Date ascending).

| Target Date | Priority | | --- | --- | | 1/1/2012 | High | | 1/1/2013 | High | | 1/1/2014 | High | | 2/2/2002 | Medium |

In the boot strap table, group and un-group table rows based on column name. For example in a given table below grouping is done using column workflow name

Hello,

How can I do that please ? In Symfony Twig I tried that :

{% for tuto in categorie.tutoriels %}
    <tr class="{{ (tuto.ID) }}">
        <td>Bob</td>
    </tr>
{% endfor %}

But the class not appear in my html... why ?

Bootstraptable version(s) affected

1.21.2

Description

I have a table with multiple columns where cell in column C = cell in column B - cell in column A. This is established using data-formatter and returning the difference between cell A & B. I also use Cell-Style to add a class to the cell in case the value is greater than 0.

The problem is that it seems that cell-style function runs before data-formatter function which means at the time the check of value within the cell is greater than zero happens before the cell content is calculated via data-formatter function

Example(s)

Using data-cell-style and data-formatter on the same cell/column

Possible Solutions

Is there a way to ensure cell-style function runs only after the data-formatter function and the cell content is populated?

Thank you

Additional Context

No response

🤔Type of Request

• [ ] Bug fix
• [x] New feature
• [ ] Improvement
• [ ] Documentation
• [ ] Other

🔗Resolves an issue?

📝Changelog

• [ ] Core
• [x] Extensions

Added a new table option copyUnique to copy only unique values to clipboard. Added a new table option copyToLowerCase to convert values to lowercase; when used with copyUnique, guarantees uniqueness if there is any character case mismatch.

💡Example(s)?

https://live.bootstrap-table.com/code/mmaravillo/13892

☑️Self Check before Merge

⚠️ Please check all items below before reviewing. ⚠️

• [x] Doc is updated/provided or not needed
• [x] Demo is updated/provided or not needed
• [x] Changelog is provided or not needed

Description

The extension for Addrbar is added and enabled. Next, when switching pages on the pagination the parameters in the url are changing, but clicking on return (go back or forward button) the table does not change accordingly, stays static unless the page is refreshed with F5. (Auto)-refresh also doesn't follow the Addrbar.

I'm using server side processing. Maybe I missed something. But I dunno what. (added extension in scripts, enabled addrbar by stating true, I guess this is all?) I've put the table options which I tried in the example.

Thanks for your time in advance!

Example(s)

https://live.bootstrap-table.com/code/DataSupplier/13882

Bootstraptable version(s) affected

1.21.2

Description

When custom view body rendered, I add some listeners on custom view element. but when I destroy bootstrap-table, event 'custom-view-post-body.bs.table' not remove. the event bound many times.

Example(s)

<button id="build" class="btn btn-primary">build</button>
<button id="destroy" class="btn btn-danger">destroy</button>
<table id="table"></table>
<template id="viewTemplate">
    <div class="col">
        <button class="action btn btn-info">%name%</button>
    </div>
</template>

<script>
    let $table = $('#table')

    function initTable() {
        $table.bootstrapTable('destroy').bootstrapTable({
            showCustomView: true,
            customView: customView,
            columns: [{
                field: 'id',
                title: 'Item ID'
            }, {
                field: 'name',
                title: 'Item Name'
            }, {
                field: 'price',
                title: 'Item Price'
            }],
            data: [{
                id: 1,
                name: 'Item 1',
                price: '$1'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }]
        })

        $table.on('custom-view-post-body.bs.table', () => {
            actions()
        })

        function customView(data) {
            let template = document.getElementById('viewTemplate').innerHTML
            let view = ''
            for (const row of data) {
                view += template.replace('%name%', row.name)
            }
            return `<div class="row">${view}</div>`
        }

        function actions() {
            let customViewEl = document.querySelector('.fixed-table-custom-view')

            customViewEl.querySelectorAll('.action').forEach((el) => {
                el.addEventListener('click', () => {
                    console.log('action')
                })
            })
        }
    }

    document.getElementById('build').addEventListener('click', function () {
        initTable()
    })

    document.getElementById('destroy').addEventListener('click', function () {
        $table.bootstrapTable('destroy')
    })

</script>

Possible Solutions

initTable function

$table
  .off('custom-view-post-body.bs.table')
  .on('custom-view-post-body.bs.table', () => {
      actions()
  })

Additional Context

No response

Bootstraptable version(s) affected

1.21.2

Description

I create two tables, both defined data-height, but values of second table appeared in the filter of first table incorrectly, and the second table's filter shows no selection.

In another case, create two tables, only define data-weight in the second table, but the second table's filter could not clear by select the empty value.

Example(s)

Case A, two tables, both defined height: https://live.bootstrap-table.com/code/shigure-j/13748 Case B: two tables, second one defined height: https://live.bootstrap-table.com/code/shigure-j/13749

Please check the 'Item Price' column's filter

Possible Solutions

The reason seems like that some functions get the fixed table head by search from whole dom but not related table https://github.com/wenzhixin/bootstrap-table/blob/4a4d39cdfb5c8a241826b7496e2348ecda3ee514/src/extensions/filter-control/utils.js#L593 https://github.com/wenzhixin/bootstrap-table/blob/4a4d39cdfb5c8a241826b7496e2348ecda3ee514/src/extensions/filter-control/utils.js#L21 https://github.com/wenzhixin/bootstrap-table/blob/4a4d39cdfb5c8a241826b7496e2348ecda3ee514/src/extensions/filter-control/utils.js#L603 https://github.com/wenzhixin/bootstrap-table/blob/4a4d39cdfb5c8a241826b7496e2348ecda3ee514/src/extensions/filter-control/bootstrap-table-filter-control.js#L529 I edit these lines like below , and it works in my case, but i'm not sure is it right to fix this problem const fixedHeader = that.$el.find('thead');

Additional Context

No response

Description

I'm no longer able to restore data changes back to original data source by overriding function("initData"). What I'm I missing?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
	
    <title>TEST!</title>
  </head>
  <body>
	<div id="toolbar">
	  <button id="getData" type="submit" class="btn btn-primary">getData</button>
	</div>
	<table
		id="table"
		data-toolbar="#toolbar">
	  <thead>
		<tr>
		  <th data-field="checked" data-checkbox="true"></th>
		  <th data-field="id">ID</th>
		  <th data-field="name">Item Name</th>
		  <th data-field="price">Item Price</th>
		</tr>
	  </thead>
	</table>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
	<script>
		(function($) {

			"use strict";

			let BootstrapTable = $.fn.bootstrapTable.Constructor,
				_initData = BootstrapTable.prototype.initData;

			BootstrapTable.prototype.initData = function (data, type) {
				if (type === "append") {
					this.options.data = this.options.data.concat(data)
				} else if (type === "prepend") {
					this.options.data = [].concat(data).concat(this.options.data)
				} else {
					data = data || this.options.data;
					this.options.data = Array.isArray(data) ? data : data[this.options.dataField]
				}

				this.data = [...this.options.data]

				if (this.options.sortReset) {
					this.unsortedData = [...this.data]
				}

				if (this.options.sidePagination === "server") {
					return
				}
				this.initSort()
				
				console.log("_initData");
			};

		})(jQuery);
	</script>
	<script>
		let $table = $('#table')
		let $getData = $('#getData');
		let data = [
		  {
			'checked': false,
			'id': 0,
			'name': 'Item 0',
			'price': '$0'
		  },
		  {
			'checked': false,
			'id': 1,
			'name': 'Item 1',
			'price': '$1'
		  },
		  {
			'checked': false,
			'id': 2,
			'name': 'Item 2',
			'price': '$2'
		  },
		  {
			'checked': false,
			'id': 3,
			'name': 'Item 3',
			'price': '$3'
		  },
		  {
			'checked': false,
			'id': 4,
			'name': 'Item 4',
			'price': '$4'
		  },
		  {
			'checked': true,
			'id': 5,
			'name': 'Item 5',
			'price': '$5'
		  }
		]

		$(function() {
			$getData.click(function () {
				let lData = $table.bootstrapTable('getData');
				alert(JSON.stringify(lData))
				alert(JSON.stringify(data))
			})

			$table.bootstrapTable({data: data})
		});
	</script>
  </body>
</html>