Paging grid with DataTables

Sample description

This sample showcases a paginated table using DataTables, a jQuery plugin. It includes the frontend implementation of a paging grid. The data source is provided through an additional CXP page (backend) that delivers JSON data. For backend implementation details, refer to the Returning a JSON data stream sample within this collection.

Run in new tab

Live editor

<title>Paging Grid | Xbase++ | Alaska Software</title>

<table id="table-suppliers" class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>Company</th>
            <th>Contact</th>
            <th>Zip</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        </thead>
    </table>
</div>
</body>
</html>

<%
    USE (::PhysicalPath + "supplier-data\supplier.dbf") INDEX (::PhysicalPath + "supplier-data\supplier.cdx") READONLY

nRows := IIf(Val(::params:length) = 0, 10, Val(::HttpRequest:Form:length)) // how many rows
    nStart := Val(::params:start)

//This logic is for DataTable API
    IF (!Empty(::params:collection))
        aParams := ::params:collection
        //The param aParams[26][2] has an order column
        nOrderColumn := Val(aParams[26][2])
        //The param aParams[27][2] has an order direction
        lOrderDirDesc := IIf(aParams[27][2] = "desc", .T., .F.)
        DbSetOrder(nOrderColumn)
        DbSetDescend(lOrderDirDesc)
    ELSE
        DbSetOrder(0)
    ENDIF

DbGoTop()
    IF nStart > 0
        DbSkip(nStart)
     ENDIF

aSuppliers := {}
    nLoaded := 0
    DO WHILE nLoaded != nRows .AND. !EOF()
        nLoaded++
        oSupplier := DataObject():new()
        oSupplier:id := AllTrim(FIELD->SUPPLIER_I)
        oSupplier:company := AllTrim(FIELD->COMPANY_NA)
        oSupplier:contact := AllTrim(FIELD->CONTACT_NA)
        oSupplier:zip := AllTrim(FIELD->POSTAL_COD)
        oSupplier:city := AllTrim(FIELD->CITY)
        oSupplier:country := AllTrim(FIELD->COUNTRY)
        AAdd(aSuppliers, oSupplier)
        SKIP 1
    ENDDO

nTotal := RecCount()
    oData := DataObject():new()
    oData:draw := ::params:draw
    oData:recordsTotal := nTotal
    oData:recordsFiltered := nTotal
    oData:comment := "The fields draw, recordsTotal, recordsFiltered are added to support the DataTables API"
    oData:data := aSuppliers

::HttpResponse:ContentType := "application/json"
    ::HttpResponse:WriteBinary(Var2JSON(oData))
    ::HttpResponse:finish()
%>

                    Result
                    built with V2 2156
                