Skip to main content
Kinetic Community

Making your table scrolling, paginated, or sortable

There are various places within your service item you may be using YUI datatables: to adjust the display of the data returned from a simple data request or a bridging request, to store a table of items your customer is requesting, etc. Occassionally it is desirable to limit the number of records visible or to allow sorting.

Usage

Let's first deal with the data returned from a search. It may be tempting, if there is often large quantities of data returned, to turn on sorting to making finding the desired data simpler. It is important in this case that you do not enable sorting. The dataset being processed is stored based on the original sort--the click returning a record number to use not the data itself. So if the data is sorted and the user clicks on the first row, he will actually be selecting the first row of the unsorted data. Instead, you can enable scrolling or pagination.

The pagination referred to here is Client-side pagination. This is done by adding a paginator to the table config.

Scrolling is done by setting the scrollable value in the config to true. In this case you will also want to specify the height and width of the desired window in the configuration. To make your columns fit properly into this space, you may need to add column widths to each column. Also, you may notice that the scroll bar only appears if necessary--causing alignment changes if there is only one page of results. You may need to fiddle with the widths to make everything acceptable. Also, be sure to check your scrollable table in all browsers that will be used. IE, particularly older versions, may not display in the same way.

Now for the case where you are displaying/storing data for the user in the record, not returning from a search. In this case, you can use the above methods, but you may want to enable column sorting. Each column as a sortable element as part of it's definition. The default is false. This can be set to true for any/all columns to allow for sorting.

Example

Standard YUI table column definition and configuration.

         // setup the data table columns
        var columnDefs = [
            {key:"Last Name",label:"Last Name",sortable:false},
            {key:"First Name",label:"First Name",sortable:false},
            {key:"Remedy Login ID",label:"Login ID",sortable:false},
            {key:"Company",label:"Company",sortable:false},
            {key:"Organization",label:"Organization",sortable:false},
            {key:"Department",label:"Department",sortable:false}
        ];
        // setup the data table configuration
        var cfg = {
            caption:"Search results (click to select one):",
            sortedBy:{key:"Last Name",dir:"asc"},
            selectionMode:"single"
        };

Scrollable YUI table column definition and configuration. The differences from the standard are highlighted in blue.

        // setup the data table columns
        var columnDefs = [
            {key:"Last Name",label:"Last Name",sortable:false,width:80},       
            {key:"First Name",label:"First Name",sortable:false,width:80},
            {key:"Remedy Login ID",label:"Login ID",sortable:false,width:80},        
            {key:"Company",label:"Company",sortable:false,width:80},
            {key:"Organization",label:"Organization",sortable:false,width:80},
            {key:"Department",label:"Department",sortable:false,width:200},
            {key:"Manager Login ID",label:"Supervisor",sortable:false,width:200}
        ];


        // setup the data table configuration
        var cfg = {
            caption:"Search results (click to select one):",
            sortedBy:{key:"Last Name",dir:"asc"},
            selectionMode:"single",
            height:"30em",width:"745px",scrollable:true
        };

Paginated YUI table column defintion and configuration.The differences from the standard are highlighted in blue.

         // setup the data table columns
        var columnDefs = [
            {key:"Last Name",label:"Last Name",sortable:false},
            {key:"First Name",label:"First Name",sortable:false},
            {key:"Remedy Login ID",label:"Login ID",sortable:false},
            {key:"Company",label:"Company",sortable:false},
            {key:"Organization",label:"Organization",sortable:false},
            {key:"Department",label:"Department",sortable:false}
        ];
        // setup the data table configuration
        var cfg = {
            caption:"Search results (click to select one):",
            sortedBy:{key:"Last Name",dir:"asc"},
            selectionMode:"single",
            paginator: new YAHOO.widget.Paginator({ rowsPerPage:25 })
        };

Sortable YUI table column definition.The differences from the standard are highlighted in blue.

         // setup the data table columns
        var columnDefs = [
            {key:"Last Name",label:"Last Name",sortable:true},
            {key:"First Name",label:"First Name",sortable:true},
            {key:"Remedy Login ID",label:"Login ID",sortable:true},
            {key:"Company",label:"Company",sortable:true},
            {key:"Organization",label:"Organization",sortable:true},
            {key:"Department",label:"Department",sortable:true}
        ];