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().