[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
}
}