Web Design Wikiclass | Tutorial / JavaScript - Table Filtering and Sorting, Tab Slider, and Social Buttons

Introduction: In this tutorial, you study using JavaScript to do table filtering and sorting, tab sliding out, and adding social buttons. The following shows a screen shot of the web page that you shall accomplish in this tutorial.

Activity One: Tab Slide Out

Get the HTML code for this activity: HTML code for your further work
Study the jQuery plugin called Tab-slide-out.
Add the required code in the HTML so that a slider tab is appeared in the left hand side of the web page.
More information about the tab slider is given below:

The tab image is given in the URL: http://img.overview.hk/jupas/feedback_tab.png

The content for the tab slider is:

        <h3>聯絡我們</h3>
        <p>如對這網站有任何意見及批評，請讓我們知道，我們會不斷努力去優化這資訊服務。</p>
        <p>我們的電郵是：user@example.com</p>

Activity Two: Table filtering and sorting

Continue to use the HTML code you have after Activity One.
Study the jQuery plugin called DataTables.
Add the required code in the HTML so that we have the following functions in the table:
- Variable length pagination
- On-the-fly filtering
- Column sorting
The following are some options for your consideration:

    "oLanguage": {  
                    "sLengthMenu": "每頁顯示最多 _MENU_ 個課程",
                    "sInfo": "共有 _TOTAL_ 個符合篩選要求，現正顯示 _START_ 至 _END_ 個。",
                    "sInfoFiltered": "（資料庫內總共有 _MAX_ 個大學聯招課程。）",
                    "sSearch": "請輸入字詞篩選課程 : "
                 },
    "aoColumns": [
                    { "sWidth": "50px" },
                    { "sWidth": "530px" },
                    { "sWidth": "80px" },
                    { "sWidth": "160px" },
                    { "sWidth": "40px" },
                    { "sWidth": "40px" }
                 ]

Activity Three:

Continue to use the HTML code you have after Activity Two.
Go to addthis.com to study how to add social bookmarking and sharing buttons on a website.
Add the required code in the HTML so that we have a number of social bookmarking and sharing buttons.

Resources and References

AddThis - The #1 Bookmarking & Sharing Service