GithubHelp home page GithubHelp logo

johanrisch / ezlist Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 816 KB

ezList is JS module that gives you the most out of an HTML-table.

License: MIT License

JavaScript 3.76% HTML 96.12% CSS 0.12%

ezlist's Introduction

ezList

ezList is JS module that gives you the most out of an HTML-table.

Usage

The most basic usage of ezList is the follwowing:

HTML

<div id="controlContainer"></div>
<table>
  <thead>
    <tr>
      <th >Table header 1</th>
      <th >Table header 2</th>
      ...
      <th >Table header n</th>
    </tr>
  </thead>
  <tbody id="ezList">
    <tr>
      <td >Table cell 1</td>
      <td >Table cell 2</td>
      ...
      <td >Table cell n</td>
    </tr>
    ...
    <tr>
      <td >Table cell 1</td>
      <td >Table cell 2</td>
      ...
      <td >Table cell n</td>
    </tr>
  </tbody>
</table>
<ul id="ezPager"></ul>

Javascript

  var ezList = new ez.list({
    controlDiv: "control",
    filters: {
        id: "filter1",
        type: "text",
        name: "Search all",
        column: "all"
    },
    paginator: {
      pageSize: 5,
      paginatorContainer: "ezPager"
    }
  });

The most important part is to remember to include the and . ezList will parse the table and add the nessecary classes to each element in order to get the most basic functions working.

For more advanced usage please see the samples.

API

The api documentation container the following secitons:

  1. Functions
  2. ezList.init(opts)
  3. ezList.update()
  4. ezList.sort(column, order, sortFunction, doNotUpdate)
  5. ezList.filter
  6. ezList.on
  7. opts

Functions

init(opts)

Initialises ezList. There are several parameters to pass in opts. It must be called in order to use ezList.

update()

Should be called whenever custom changes to the internal state of ezList is altered. Update() goes through all items and shows the items on the current page of ezPager.

sort(column, order, sortFunction, doNotUpdate)

sorts the item list in ascending "asc" or descending "desc" with the given sortFunction

The sortfunction takes two argumenra (a,b) and returns a number (-infty,infty) with the following rules

ret < 0 if a < b
ret = 0 if a equals b
ret > 0 if a > b

The column argument is mereley there to be able to tell on callbacks what column is being sorted. E.g to add/remove classes depending on ascending/descending sorting

If doNotUpdate is undefined or false it indicates that you will take responsibility on updating the ezList when the internal state is ready.

filter(filter, doNotUpdate)

Will filter each item in ezList according to the function "filter" filter returns true iff the item should be included in the list and false otherwise.

on(event, func)

Options

ezlist's People

Contributors

johanrisch avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.