Simple Grid Whit Pager

Topics: jQuery
Jul 15, 2011 at 8:28 PM

Hi folks! I'm trying to implement a simple grid to display data from a service, but the pager don't works. That's my code: 

 

@{
    Layout = "~/Views/Shared/BaseLayout.cshtml";
}
<h1>Index</h1>


<script type="text/javascript">
    $(document).ready(function () {
        var serviceUrl = 'FINEP-Web-Services-EntitiesService.svc';

        var empresa, empresaDataSource = $.dataSource({
            serviceUrl: serviceUrl,
            queryName: "GetEmpresa",
            bufferChanges: false,
            refresh: function (data) {
                empresa = data;
                render();
            }
        }).refresh();

        function render() {
            var empresaList = new ListControl(empresa, {
                template: "#empresaTemplate",
                container: "#empresas",
                itemAdded: function (book, bookElement) {
                   
                }
            });

            $("#pager").pager({
                dataSource: $([empresa]).dataSource(),
                pageSize: 5
            });
        }
    });

</script>

<script id="empresaTemplate" type="text/x-jquery-tmpl">
 <tr class='empresa-item'>
        <td valign="top">${RazaoSocial}</td>
        <td>${NomeFantasia}</td>
        <td>${CNPJ}</td>
    </tr>
</script>
 <script id="pageNumberTemplate" type="text/x-jquery-tmpl">
    <td class="pagerButton">${$item.pageNumber * $item.pageSize + 1}-${($item.pageNumber + 1) * $item.pageSize}</td>
    <td width='10px'></td>
</script>
<table border="0">
    <thead>
        <tr>
            <th>
                Raz�o Social
            </th>
            <th>
                Nome Fantasia
            </th>
            <th>
                CNPJ
            </th>
        </tr>
    </thead>
    <tbody id="empresas"></tbody>
   
</table>

<div class="catalogNavigation">
    <table border="0">
        <tr id="pager"></tr>
    </table>
</div>

 

some ideas?