How to create a custom filter using BootstrapTable and php
I am using bootstrap table and php. My table has a column that shows custom data based on the columns value. Ie, if value <5 display low, if value == 5 display normal, and if value > 5 display high. I want to have a custom filter so that I can, for example, show all rows that are normal. I have tried filterBy but that does not seem to work for me
ASKER
It is a bootstrap-table. The table is created by doing something like:
$('.table-offers-list').bootstrapTable({
url: '/admin/api/getdata',
toolbar: '#table-mydata-toolbar',
cookie: true,
cookieIdTable: "tol",
cookieStorage: "sessionStorage",
sortName: 'status',
sortOrder: 'asc',
striped: true,
pagination: true,
search: true,
searchAlign: 'left',
searchOnEnterKey: true,
pageSize: 20,
pageList: [20, 50, 75, 100, 'All'],
sidePagination: "server",
filterControl: true,
responseHandler: responseHandler,
queryParams: queryParams,
rowStyle: rowStyle,
columns: offerColumns
});
ASKER
I am also using javascript and jQuery
I started to set up a codepen for you to help get this figured out. The link is here https://codepen.io/padas/pen/eYrjQXb, you may need to fork it to make it your own or just work on here.
Click on the settings to make sure we are using the correct external files. Then recreate your HTML, additional CSS if any as well as any other JS than what I added from above. In place of, " url: '/admin/api/getdata', " you will want to recreate your own data so we can see how this is working. Start with the examples https://bootstrap-table.com/docs/getting-started/usage/ and use examples where the data is not remote.
The key is the more you can detail what you are doing and make it easy for us to assist you, the better help we can provide.
If it is easier, provide a link to your site. You can recreate a special page just for the public using data you don't mind us looking at. This may take a little setting up on your part but it is the only way we can assist.
ASKER
Unfortunately, I am unable to give you a link to the page and your link to codepen does not work for m
ASKER
If I create a bootstrap table similar to how it is done in https://bootstrap-table.com/docs/getting-started/usage/ what do I add to the columns definition if I want a custom filter for one of the columns. For example, if I have a column that contains an integer 1-10 how do I create a filter with the options: high, normal, low in the dropdown and if I select high I want to get all of the rows where the integer value is > 5?
You can use a link to Any webpage do you have control of it doesn’t have to be the one You were working on is that may have your own private information which I understand. But you can create a test case on a blank page that is just dealing with the table and some fake data.
Or you can use a playground like CodePen or jsfiddle or one of the others and re-create the table using the same JavaScript and CSS libraries that would be on your own page. This is called creating a test case and is the only way that we can help you to so we know exactly what you’re working with.
First off, when you say 'that doesn't work for me', we're none the wiser so are left guessing. You do need to give us a little more info about what that means, even if you can't post up a link to your page. Like Scott says, you will always get better help if you can clearly and consicely demonstrate your problem - either by building a simple, non-sensitive example or creating a demo on an online sandbox (such as CodePen or JSFiddle). If that's not possible, try and explain in detail what the problem is.
Now, we haven't seen any of the code you're using other than the Datatable init code you posted above. In the options, you're setting the sidePagination to 'server'. This means that anytime the table needs fresh data (search / pagination / filter etc), it will go back to the server for that info - in your case it will send a new GET request to /admin/api/getdata. If you don't want to do it at the server end, remove that option (or set it to 'client')
Assuming you do want to handle it at server-side, open up your WebDev console (press F12), then you should be able to see this GET request when you change the Rank dropdown. You'll see a request looking something like this:
/admin/api/getdata?offset=
It may look different because in your code above, you have a custom method for handling the queryParams.
As part of the querystring, you'll see the filter key is a json-encoded Object containing the selected option, so you can use that in your PHP server-side script to filter your data and return only the records that you need. How you do that will depend entirely on the code you have in your getdata script.
Hi,
I'm using Datatables and this is the first time that I try Bootstrap-Table.
This project seems interesting so I tested it and I don't know why but most of their example does not work or not working correctly.
I have checked on github and there are many bugs.
https://github.com/wenzhixin/bootstrap-table/issues
So maybe this project is too new and still in beta mode I don't know I don't have much time to test it.
So if you have many complex table, I would recommend you to use Datatables for more stability and this is very flexible. https://datatables.net/
ASKER
I don't have a choice, I must use bootstrap-table. I am currently working on creating a demo using codepen
ASKER
Here is my codepen link to my demo: https://codepen.io/anna-kraus/pen/rNvZjaY
The first table has a filter that uses the rank's values and works fine. The second table's dropdown options are low, normal and high. I need to create a filter that if low is selected I get all of the rows where rank < 5.
Well, it seems to work in codepen but not in my project. I will have to see what the differences are
ASKER
Can someone tell my why my filter under rank is not working: https://codepen.io/anna-kraus/pen/rNvZjaY
filterData: 'var:ad_positions',
And you'll be good
ASKER
But I need filterData
Thank you for taking the time to build the test case, this really helps.
What Chris is referring to is below. It works as expected in your test that I forked and commented that part out. https://codepen.io/padas/pen/yLjxpBE?editors=1010
$( document ).ready(function() {
$('#table').bootstrapTable({
filterControl: true,
striped: true,
columns: [{
field: 'id',
title: 'Item ID',
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'rank1',
title: 'Rank',
filterControl: 'select',
// filterData: 'var:ad_positions',
}],
data: [{
id: 1,
name: 'Item 1',
rank1: 5
}, {
id: 2,
name: 'Item 2',
rank1: 2
}, {
id: 3,
name: 'Item 3',
rank1: 7
}, {
id: 4,
name: 'Item 4',
rank1: 9
}]
});
ASKER
Thank you everyone for your help. I ended up with a different solution. I am getting my data as a json and I have added returning the rank value (low, normal, high) to the data and I use it in my column.
ASKER
Originally my incoming data still had rank values from 1-10 and then I had a formatter to determine what to display. My change was that I added the relative rank value (high, normal, low) to my returned data.
What are you using for your table? Is it https://datatables.net/ or https://bootstrap-table.com/ or something else?
Typically, your filter is going to be using javascript and the javascript will either filter data that is already loaded or do an ajax request back to your PHP. While you can filter using PHP, that would require a page refresh.
Can you provide more details as to what you are doing and code you are using as well as which javascript library if any?