Fork me on GitHub

Deep Links

jPList jQuery Data Grid Controls plugin supports deep linking feature. It can be used to save plugin state (it can be achived also by using cookies or localstorage options). The other benefit of deep linking is an ability to point a visitor to the page with predefined control states, like specific page number in pagination control or selected sort option. Deep linking could be enabled using deepLinking: true setting in JavaScript options.

<!-- Deep linking could be enabled using deepLinking: true  setting -->						
<script type="text/javascript">
   $('document').ready(function(){
   
      $('#demo').jplist({
      
         ...
   
         ,deepLinking: true         
      });
   });
</script>

The URL structure could be controlled using delimiters:

<script type="text/javascript">
   $('document').ready(function(){
   
      $('#demo').jplist({
      
         ...
   
         ,deepLinking: true
         ,hashStart: '#' //the start of the hash part, for example it may be '#!key='
         ,delimiter0: ':' //this delimiter is placed after the control name 
         ,delimiter1: '|' //this delimiter is placed between key-value pairs
         ,delimiter2: '~' //this delimiter is placed between multiple value of the same key
         ,delimiter3: '!' //additional delimiter       
      });
   });
</script>

Every control can be excluded from deep link (if deep linking is enabled) using data-control-deep-link="false" attribute:

<!-- filter by title -->
<div class="text-filter-box">
	<i class="fa fa-pencil jplist-icon"></i>
	
	<!--[if lt IE 10]>
	<div class="jplist-label">Filter by Title:</div>
	<![endif]-->
	
	<input 
		data-path=".title" 
		type="text" 
		value="" 
		placeholder="Filter by Title" 
		data-control-type="textbox" 
		data-control-name="title-filter" 
		data-control-action="filter"
		data-control-deep-link="false"
	/>
</div>