Let’s leave SAP aside for a while to talk about HTML and Javascript, which I also like 🙂.
In a personal web project, I needed an easy way of making lists which data I could filter and sort, and a quick search on Lord Google gave me the answer: List.js
List.js is a light and quick JavaScript library that let’s you easilly create data listings, allowing sort, search and much more.
Like any JavaScript library, first we’ll need to download it and link it in our HTML document.
<script type="text/javascript" src="/js/list.min.js"></script>
We will define a div for out list, in which we will create our list with
and tags. A class needs to be defined for the list. For now, we will leave it as “list”. List.js will search for this class to interact with the HTML.
<div id="lenguajes"> <ul class="list"> <li> <p class="puesto">Puesto: 1 <img src="/img/oro.png" alt="" /></p> <p class="lenguaje">Lenguaje: Java</p> </li> . . . </ul> </div>
Every item field to take into account will have a unique class too. Later, we will need to tell List.js every one of these classes.
Adding a search box and sort buttons is pretty simple too:
<input class="search" type="text" /> <button class="sort" data-sort="puesto">Ordenar por puesto</button> <button class="sort" data-sort="lenguaje">Ordenar por lenguaje</button>
Like before, we will the classes as “search” and “sort”. If you’d like to change them, read a bit further. Also, take a look at the sort buttons. The data-sort attribute needs to have the same value of the field that button will sort by.
After our HTML list, we will add a bit of JavaScript, to let List.js know where in the document our list is and which are the fields of every item.
<script type="text/javascript">
/* "Puesto" y "Lenguaje", las clases que identifican los distintos datos en el listado HTML */
var opciones = {
valueNames: [ 'puesto', 'lenguaje' ]
};
/* "Lenguajes", la clase que identifica la caja que contiene el listado en el HTML */
var lista = new List('lenguajes', opciones);
</script>
Declaring the list in Javascript is as easy as that 🙂. As you can see, you just need to indicate the “name” (class) of the div containing our list, and an array of options, in which we will indicate the name of the fields to take into account.
As I told you a bit earlier, it is possible to change the classes of the HTML list (<ul> tag), and the search and sort buttons, simply by adding the following items to the options array:
| listClass | By default:”list” | The name of the <ul> element class |
| searchClass | By default:”search” | The name of the search box class |
| sortClass | By default: “sort” | The name of the sort buttons class |
An example would be as follows:
<script>
var opciones = {
valueNames: [ 'puesto', 'lenguaje' ],
listClass: 'lista',
searchClass: 'busqueda',
sortClass: 'ordenacion',
};
var lista = new List('lenguajes', opciones);
</script>
With this, the dynamic list would be functioning without a problem. You can download an example in the bottom of this post 🙂.
There’s more! List.js allows you much more, like item pagination, item managing from javascript (add, edit, remove…), plugin integration… But I think this is enough for the basics. You can check the documentation here.
See you in the next post!
