<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/datatable/assets/skins/sam/datatable.css?_yuiversion=2.3.1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/button/assets/skins/sam/button.css?_yuiversion=2.3.1" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js?_yuiversion=2.3.1"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js?_yuiversion=2.3.1"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js?_yuiversion=2.3.1"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js?_yuiversion=2.3.1"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/datasource/datasource-beta-min.js?_yuiversion=2.3.1"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/datatable/datatable-beta-min.js?_yuiversion=2.3.1"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js?_yuiversion=2.3.1"></script>

<div class="content">


<a name="<tmpl_var assetId>"></a>
<tmpl_if session.var.adminOn>
    <p><tmpl_var controls></p>
</tmpl_if>    

<tmpl_if displayTitle>
    <h1><tmpl_var title></h1>
</tmpl_if>
    
<tmpl_if description>
    <tmpl_var description><p />
</tmpl_if>
    
<tmpl_if debugMode>
    <ul>
    <tmpl_loop debug_loop>
        <li><tmpl_var debug.output></li>
    </tmpl_loop>
    </ul>
</tmpl_if>

<p /><p />

<script type="text/javascript">
YAHOO.example.Data = {
    babynames: [
<tmpl_loop rows_loop>
        {isboy: "<tmpl_var row.field.IsJongen.value>", name: "<tmpl_var row.field.Babynaam.value>"},
</tmpl_loop>
    ]
}

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.MultipleFeatures = new function() {
        
        var myColumnDefs = [
            {key:"isboy",label:"boy",width:"14em",sortable:true},
            {key:"name",label:"Name",width:"16em",sortable:true}
        ];

        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.babynames);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["isboy","name"]
        };

        var myConfigs = {
            sortedBy:{key:"name",dir:"asc"},
            paginated:true,
            paginator: {
                rowsPerPage: 25,
                dropdownOptions: [10,25,50,100],
                pageLinks: 5
            }
        }

        this.myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, this.myDataSource, myConfigs);
        this.myDataTable.subscribe("rowClickEvent",this.myDataTable.onEventSelectRow);
    };
});

</script>
    <div class=" yui-skin-sam">
    <div id="complex">*</div> 
    </div>
</div>