How can i present efficiently 10000 record list in single html file

Question

I have single html file that contains 10000 list items that needs to be in single html file order by categories for example ordered by the ABC not all of them needs to be shown.
each time only 500 ( so the other are hidden ) .
what way or method can efficiently rearrange me the list in this way ?
java script ? css?

its all in client side , no server side.

Answer 1

You can use this to alphabetize your list:

var list = document.getElementById("myList");
var listItems = [].map.call(list.getElementsByTagName("li"), function(item) {
    return { text: text(item), element: item };
});
function sortList() {
    var frag = document.createDocumentFragment();
    listItems = listItems.sort(function(a, b) {
        return a.text < b.text ? -1 : b.text < a.text ? 1 : 0;
    });
    listItems.forEach(function (item) {
        frag.appendChild(item.element);
    });
    list.innerHTML = "";
    list.appendChild(frag);
}
function text(el) {
    var s = el.innerText;
    if (!s && s != "") {
        s = el.textContent || "";
    }
    return s.toLowerCase();
}

Working demo: http://jsfiddle.net/4bm57/6/

To filter the list:

function filterList() {
    var frag = document.createDocumentFragment();
    listItems.forEach(function (item) {
        if ([filter criteria code here]) {
            frag.appendChild(item.element);
        }
    });
    list.innerHTML = "";
    list.appendChild(frag);
}

This code uses Array methods not available in some older browsers. For this code to work in IE8 or earlier, see the compatibility sections for Array.map() and Array.forEach() .

Answer 2

A Datatable with Pagination is way to go.

Below example is a JSF component but I think it is good enough to give you the idea.

Example: DataTable Handling Large Data

Answer 3

I would reccommend that you look at KnockoutJs . It has all the features you may want.

1. It is designed to work with significant amounts of data that is client side.
2. You can dynamically create grids of different completely formats easily by using differing templates to display you data. See http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html .
3. You can implement live searching easily. See http://jsfiddle.net/rniemeyer/cCBqJ/ for example. Using this example, you can also implement custom filtering to only display the data of interest.
4. You can implement any sort of dynamic sorting you would like. See http://jsfiddle.net/rniemeyer/93Z8N/ for a simple example. You can also chain output of filter into sort routine.
5. You can implement pagination easily by chaining a paging filter after the sorting function.

So you can easily slice and dice and show the data anyway you would like.

Downside is that there are not current a single open source project to that support generalized grids with sorting, filtering and client side paging. There are various partial implementations. Best information is at http://www.knockmeout.net/ and https://groups.google.com/forum/#!forum/knockoutjs .

I'm currently using all of the above features in my current project. KnockoutJs does have a learning curve. But I found it the best way to do this type of data presentation.