5

Search, sort, filters, flexibility to tables, list and more! - List.js

 1 year ago
source link: https://listjs.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Basic examples

Here is an example of a list with List.js applied. List.js can be used in three different ways. It can be on existing HTML, it can create it's own HTML or a combination of both methods.

Jonny Strömberg

Jonas Arnklint

Martina Elm

Gustaf Lindqvist

Apply List.js on existing HTML

<div id="users">

<!-- class="search" automagically makes an input a search field. -->
  <input class="search" placeholder="Search" />
<!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  <button class="sort" data-sort="name">
    Sort
  </button>

<!-- Child elements of container with class="list" becomes list items -->
  <ul class="list">
    <li>
<!-- The innerHTML of children with class="name" becomes this items "name" value -->
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

Apply List.js on existing HTML and then add items

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">
<!-- This, the first element in the list, will be used as template for new items. -->
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>

var options = {
  valueNames: [ 'name', 'born' ]
};

// These items will be added to the list on initialization.
var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

// It's possible to add items after list been initiated
userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

Make List.js create a list from scratch

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list"></ul>

</div>
var options = {
  valueNames: [ 'name', 'born' ],
  // Since there are no elements in the list, this will be used as template.
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [
  {
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK