jsomfilter

Title: Filter the data even we checked the multi check boxes.

Description:
In below list Customer column has "Banking, Loan, Insurence" multi options there. We are going to display the data which is  related to "Banking" service. to do that we are filter the data.


Creat a list name  called "SupportDetails"
Create below colums. Chose "Customer" Coulmn as choice and allow multi items select.



Code:

https://lakkuoffice365.sharepoint.com/sites/lakku/SitePages/BankingService.aspx
add below code in BankingService.aspx


  1. <html>  
  2.    <head>  
  3.      
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  5. <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>  
  6. <script type="text/javascript" src="/_layouts/15/init.js"></script>  
  7. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
  8. <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
  9.   
  10.   
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  12.   
  13. <div id="divListItems"></div>  
  14.   
  15. <script>  
  16.   
  17. $(function () {  
  18.   
  19.     ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");  
  20.   
  21. });  
  22.   
  23. function retrieveListItems() {  
  24.   
  25.     var clientContext = new SP.ClientContext();  
  26.   
  27.     var oList = clientContext.get_web().get_lists().getByTitle('SupportDetails');  
  28.   
  29.     var camlQuery = new SP.CamlQuery();  
  30.   
  31.    uniq1="Banking";  
  32.    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Customer\'/>' +  
  33.         '<Value Type=\'Text\'>'+ uniq1 +'</Value></Eq></Where></Query><RowLimit>100</RowLimit></View>');  
  34.   
  35.     this.collListItem = oList.getItems(camlQuery);  
  36.   
  37.     clientContext.load(collListItem);  
  38.   
  39.     clientContext.executeQueryAsync(  
  40.   
  41.     Function.createDelegate(this, this.onQuerySucceeded),  
  42.   
  43.     Function.createDelegate(this, this.onQueryFailed)  
  44.   
  45.     );  
  46.   
  47. }  
  48.   
  49. function onQuerySucceeded(sender, args) {  
  50.   
  51.     var listItemInfo = '';  
  52.      var table = $("#tblcategories");  
  53.      var innerHtml = "<tr><td>Support Team</td><td>Contactnumber</td><td>MailID</td></tr>";  
  54.   
  55.   
  56.     var listItemEnumerator = collListItem.getEnumerator();  
  57.   
  58.     while (listItemEnumerator.moveNext()) {  
  59.   
  60.         var oListItem = listItemEnumerator.get_current();  
  61. innerHtml += "<tr><td>"+ oListItem.get_item('Title') +"</td><td>" + oListItem.get_item('Contactnumber') +"</td><td>" + oListItem.get_item('MailID')+ "</td></tr>";  
  62.   
  63.   
  64.     }  
  65. table.html(innerHtml);  
  66.   
  67. }  
  68.   
  69. function onQueryFailed(sender, args) {  
  70.   
  71.     alert('Request failed. ' + args.get_message() +  
  72.   
  73.     '\n' + args.get_stackTrace());  
  74.   
  75. }  
  76.   
  77. </script>  
  78.  </head>  
  79.    <table id="tblcategories">  
  80.   
  81.     </table>  
  82.   
  83. </html>  
OutPut:
Subscribe to: Posts (Atom)