Untitled

<!DOCTYPE html>
<html>
<head>
    <title>list.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <link rel="stylesheet" type="text/css" href="liststyle.css" />

    <script type="text/javascript">
        var options = {
            valueNames: ['fname', 'lname', 'average']
        };
        var students = new List('students', options)
    </script>
</head>

<body>
    <div id="students">
        <input class="search" />
        <button class="sort" data-sort="fname">
            Sort by first name
        </button>
        <button class="sort" data-sort="lname">
            Sort by last name
        </button>
        <button class="sort" data-sort="average">
            Sort by average
        </button>

        <ul class="list">
            <li>
                <span class="fname">David</span>
                <span class="lname">Cohen</span>
                <span class="average">98</span>
            </li>
            <li>
                <span class="fname">Levy</span>
                <span class="lname">Cohen</span>
                <span class="average">88</span>
            </li>
            <li>
                <span class="fname">Ran</span>
                <span class="lname">Zabari</span>
                <span class="average">74</span>
            </li>
            <li>
                <span class="fname">Jack</span>
                <span class="lname">Spidro</span>
                <span class="average">64</span>
            </li>
            <li>
                <span class="fname">Robin</span>
                <span class="lname">Cohen</span>
                <span class="average">98</span>
            </li>
        </ul>
    </div>
</body>
</html>