Fetching Parameters value from URL using Java Script

How to get parameter's value  from URL using jquery ?

Some of the time we are in need to fetch the parameters which are in URL so that we can make query  or use them as per our logic.So we can easily fetch URL  parameters by following code with ease.

1) Let say our URL is    http://localhost:8080/DemoApp/fetchParam.action?id=9&monthYear=2017-          22    and we want to fetch value of id and monthYear in current view page for any xy logic. I              have  made one function  by the name of getUrlParameter ('key')   where key will be the                  parameter name in URL like in this example  id and monthYear will act as key and than we can          do some   manipulation by getting the URL and make use of these values in current page as and          when required.

        var idValue= getUrlParameter('id');
        var monthYearValue = getUrlParameter('monthYear');

Note: idValue and  monthYearVal   can be used in current page for further use.


2) Function definition is as follows for same:
 
function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}


This function  will return  value according to the key passed.So this we can fetch query string parameters from URL with ease.


Thanks for reading
Regards
Anoop Butola

Data Table Filtering Code using Bootstrap in view Layer only.

In this code we assume that  you have one data table and  many filter options are there . Many of time when we are new in programming we are not aware of the power of Bootstrap Api  and we start applying coding using java script or jquery. But bootstrap provides in built support for filtering . In this post I  just wanted to share same so that who does not use it can use in future.

Using below push function we can do filtering in any data table with ease.

How it works?

Explanation: Whenever data table properties are applied to normal table that time only this  $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ){  });   this function is called internally and each row of the data table is created by satisfying the condition mentioned inside this function.

Steps to implement search functionality using this plugin or API.

1) var table=$('#example').DataTable({

    "filter" : true,

"info" : false,

"bLengthChange" : false,

"scrollX": true,

});

Make sure that  in your  data table attributes "filter": true   should be true .Than only filtering will work.

2) Let say example is the id of our data table and we have apply filters on this table data. The below table is filled with some dummy data.

<table id="example" class="display table-striped table-bordered " cellspacing="0" width="100%">

<thead>

<tr style="background-color: gray; color: white; ">

<th>Roll No.</th>

<th>Student Name</th>

<th>Class</th>

<th>School Name</th>

                                  </tr>

                      </thead>

                 

                        <tbody>

 <tr> 

                                 <td> 2</td>

                                <td>Arun</td>

                                 <td>VI</td>

                                 <td>St. Theresa's Convent School </td>

                                </tr>

                                <tr> 

                                 <td> 3</td>

                                <td>Ram</td>

                                 <td>VI</td>

                                 <td>St. Xaviers School </td>

                                </tr>

                                <tr> 

                                 <td> 4</td>

                                <td>Jaspreet</td>

                                 <td>VII </td>

                                 <td>St. Theresa's Convent School </td>

                                </tr>

             </tbody>

 </table>

3)At the top of this data table view we have filters say

RollNo:________                        Name:________       class:_________    school:___________


Let say all above mentioned  are text boxes and  have ids as  id="rollNofield"     ,id="nameField" , id="classNameField"    school="schoolFiled" .           

4)Now we can put search code inside document  ready block so that whenever data table with id example is drawn this search API will be called internally and data table is drawn by  passing all conditions  mentioned inside it . 

Filter Code is given below::  This code need to be inserted inside document ready so that first time also data table displays data  according to filters default value.

$.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var rollNoFlag="false"; if($("#rollNoField").val()=="" || $("#rollNofield").val()==data[0]){ receipNoFlag="true"; } var nameFlag="false"; if($("#nameField").val()=="" || nameField").val()==data[1]){
nameFlag="true"; } var classFlag="false"; if($("#classField").val()=="" || $("#classField").val()==data[2]){ classFlag="true"; }
var schoolFlag="false"; if($("#schoolField").val()=="" || $("#schoolField").val()==data[3]){ schoolFlag="true"; }

if(rollNoFlag=="true" && nameFlag=="true" && classFlag=="true" && schoolFlag=="true"){
return true; //row will be drawn in this case
}else {
return false;// row will be skipped
} 
}


Logic: In this data is a single dimensional array which refers to the content of each row. All the indexes of data array are checked one by one for each  row . Than for each row, flags are set if values matches according to filter field's  values (above text boxes in this case) .At last if all flags are true than only row will be drawn else it wont draw.



Thanks everyone for reading.
Regards
Anoop Butola