[Feature Request] simple datatable

[billybradley]

What is your enhancement?

i cant create datatable with server side render, and the css on pagable number is not running.

[Alexandre-petitjean]

Can you share your datatable code? It should look like this:

<div class="table-responsive">
  <table id="datatable" class="table table-flush order-column">
    <thead class="thead-light">
      <tr>
        <!-- Header -->
      </tr>
     </thead>
     <tbody>
        <!-- Data -->
     </tbody>
  </table>
</div>

<script>
      const dataTableBasic = new simpleDatatables.DataTable("#datatable", {
        searchable: false,
        fixedHeight: true
      });
</script>

[billybradley]

that simple-datatable is incomplete documentation. can u share me sample code of datatable pagination with the response pageTotal rowPerPage rowTotal sortBy sortType

Here mylast attempt let table = null; async function fetchCommunities(param) { let url = new URLSearchParams(param) console.log(url) let resp = await fetch(getDataList?${url}) return resp.json() } function convertObject(dataObject) { console.log(" dataObject ",dataObject) if (dataObject.length === 0) return { headings: [], data: [] };

let obj = {
    // Quickly get the headings
    headings: Object.keys(dataObject[0]),

    // data array
    data: []
};

const len = dataObject.length;
// Loop over the objects to get the values
for (let i = 0; i < len; i++) {
    obj.data[i] = [];

    for (let p in dataObject[i]) {
        if (dataObject[i].hasOwnProperty(p)) {
            obj.data[i].push(dataObject[i][p]);
        }
    }
}

return obj

}; const labelData = { placeholder: "Search", searchTitle: "Search within students", noRows: "No data to display", info: "Showing {start} to {end} of {rows} data (Page {page} of {pages} pages)" } let param = {

search: "",
pageSize :"7",
startPage: "1",
sortBy   : "id",
sortOrder : "ASC"

}

document.addEventListener("DOMContentLoaded", async (event) => {

let data = await fetchCommunities(param)
console.log(data)
updateDataTable(data);
table.on('datatable.search', async function (query, matched) {
    // Our workaround doesnt work if there are search results on the client-side:
    // Uncaught TypeError: Node.appendChild: Argument 1 is not an object.
    console.log(matched)
    console.log(query)
    let search = {...param,
    search: query}
        // table.clear() doesnt seem to work
        let rows = table.rows();

        let newData = await fetchCommunities(search)
        updateDataTable(newData)
        if (newData.datas.content.length == 0) {
            table.wrapper.classList.remove("search-results")
            table.setMessage(table.options.labels.noRows)
        }

        // If searching is set to true, we get "no results"
        rows.searchData = []
        table.searching = false
        table.update()

});

table.on('datatable.perpage', async function (pageSize) {
    param.pageSize = pageSize;
    param.startPage = 1;
    await fetchAndUpdateTable();
});

table.on('datatable.page', async function (page) {
    param.startPage = page;
    await fetchAndUpdateTable();
});

async function fetchAndUpdateTable() {
    let newData = await fetchCommunities(param);
    updateDataTable(newData);
    table.update();
}

function updateDataTable(data) {

    table = new simpleDatatables.DataTable("#dtMenu", {
        data: convertObject(data.datas.content),
        labels: labelData,
        displayLength : 5,
        perPageSelect: [5, 10, 15, 25, "all"],
        searchable: true,
        fixedHeight: true,
        paging: true,
        pager : true,
        page : 5,
        perPage:this.perPageSelect,
        totalPages : data.datas.totalPages
    })
}

})

here response sample { "message": "success", "exception": null, "detail": null, "status": "200", "datas": { "content": [ { "id": 1, "name": "Master Bank", "urlPath": "/master/bank/list", "role": "cms_admin,cms_user,ROLE_ADMIN,ROLE_USER" }, { "id": 2, "name": "Test Menu 1", "urlPath": "blabla", "role": "cms_admin" }, { "id": 3, "name": "Test Menu 2", "urlPath": "blabla", "role": "cms_admin" }, { "id": 4, "name": "Test Menu 3", "urlPath": "blabla", "role": "cms_admin" }, { "id": 5, "name": "Test Menu 4", "urlPath": "blabla", "role": "cms_admin" }, { "id": 6, "name": "Menu Management", "urlPath": "/master/menu/list", "role": "cms_admin,ROLE_ADMIN" }, { "id": 7, "name": "Test Menu 5", "urlPath": "blabla", "role": "cms_admin" }, { "id": 8, "name": "Test Menu 6", "urlPath": "blabla", "role": "cms_admin" }, { "id": 9, "name": "Test Menu 7", "urlPath": "blabla", "role": "cms_admin" }, { "id": 10, "name": "Test Menu 8", "urlPath": "blabla", "role": "cms_admin" } ], "totalElements": 11, "totalPages": 2, "page": 0, "size": 10 } }