jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Additional filter – how to set it up
Tagged: custom form, filtering, jqxgrid, php, server filtering
This topic contains 4 replies, has 2 voices, and was last updated by ivailo 9 years, 10 months ago.
-
Author
-
Hello I want to create an extra filter type
For now I made a form ajax that would update the whole grid my js is
$("#form_filter").submit(function() { $("#jqxgrid").jqxGrid('beginupdate'); $("#jqxgrid").jqxGrid('updatebounddata', 'cells'); //refresh data var url = "serverfiltering_paging_and_sorting_data.php"; // the script where you handle the form input. $.ajax({ type: "GET", url: url, data: $("#form_filter").serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response from the php script. } }); return false; // avoid to execute the actual submit of the form. $("#jqxgrid").jqxGrid('endupdate'); });
And a part of my filter
<form class="form-horizontal" id="form_filter" role="form"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label class="control-label col-sm-2" for="awizacje">Awizacje</label> <div class="col-sm-10"> <div class="input-group"> <div class="input-group-addon"><input type="checkbox" name="c_awizo"></div> <?PHP $zlecenie->populate_dropdown_awizacje(); ?> </div> </div> </div> <div class="form-group"><!-- dropdown --> <label class="control-label col-sm-2" for="priorytet">Priorytet</label> <div class="col-sm-10"> <div class="input-group"> <div class="input-group-addon"><input type="checkbox" name="c_priorytet"></div> <?PHP $zlecenie->populate_dropdown_priorytet(); ?> </div> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="adres">Adres</label> <div class="col-sm-10"> <input type="text" class="form-control" name="f_adres" placeholder="Podaj adres"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="adres">Nr. Zlec</label> <div class="col-sm-10"> <input type="text" class="form-control" name="f_nr_zlec" placeholder="Numer zlecenia"> </div> </div> </div>
The file generator serverfiltering_paging_and_sorting_data.php – is provided by you. How could I manage it to get my desired output that after the form submit I will get the data reloaded with my filters.\Thanks
Hi kavvson,
Look at this demo.
Here is presented how to add custom filters. You can add your filter condition this way and it will serialize the data and prevent changes of your php code.Add also this code to update the new data.
url: ‘serverfiltering_paging_and_sorting_data.php’,
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comWould you be so kind and provide me with the example? I am not able to figure out how to make it
^
Hi kavvson,
Here is a demo, presented filtering from aditional input fields.
To make it server filtered you have to organize your source like this.
var source = { ..... /// add this code for sending parameters to the filtering script and update the grid when the new data is loaded url: 'serverfiltering_paging_and_sorting_data.php', filter: function() { // update the grid and send a request to the server. $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); }, cache: false };
This is the most that we can help you.
You have to follow the same logic to set it according the needs of your project and rest of your code.Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.