Bootstrap datagrid Integration

(2) Share

Report

Posted on by Henil

I have one demo code for Bootstrap datagrid view. My Requriment is that as per demo code I want to display records in Portal from Contact table but using prebuilt Bootstrap datagrid. so if there is 10 select then it will call api display 10 records and also Pagination is include in Below demo code with prebuilt Bootstrap datagrid. so using pagination it skip selected record and call api then get 10 records but here i just give example selected record 10 but it should be dynamic as per bootstrap datagrid view. This is demo code but help me for implement dynamic for contact table using Bootstrap datagrid table and call web api Server Side using skip and token. Thanks in advance for helping..

Please see attached file for demo code.

Screenshot 2025-0...

Demo Bootstrap Da...

I have the same question (0)

All responses (1)

Answers (0)

Suggested answer

Jon Unzueta Super User 2025 Season 2 on at

Like (1)

Report
1. HTML con Bootstrap Table

Usa Bootstrap Table para facilitar la paginación del lado del servidor:

2. JavaScript para llamadas a la Web API

$('#contactTable').bootstrapTable({

    ajax: function (params) {

        const pageSize = params.data.limit;

        const offset = params.data.offset;

        const token = "YOUR_ACCESS_TOKEN"; // Usa el token del portal si es necesario

        fetch(`https://yourorg.crm4.dynamics.com/api/data/v9.2/contacts?$top=${pageSize}&$skip=${offset}&$count=true`, {

            headers: {

                "Authorization": `Bearer ${token}`,

                "Accept": "application/json"

            }

        })

        .then(response => response.json())

        .then(data => {

            params.success({

                total: data['@odata.count'],

                rows: data.value

            });

        })

.catch(error => {

            console.error("Error fetching contacts:", error);

            params.error(error);

        });

    }

});

3. Configuración del Web API

Asegúrate de que el endpoint incluya ?$count=true para obtener el total de registros.

Usa $top para el número de registros por página.

Usa $skip para omitir los registros ya mostrados.

4. Seguridad y Autenticación

Si estás en Power Pages, puedes usar Web API con tokens del portal.

Alternativamente, puedes crear una Web API personalizada en Power Platform que actúe como proxy.

🏷️ Tag me if you have any further questions or if the issue persists. ✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems. ❤️ Give it a Like if you found the approach useful in any way.

Was this reply helpful? Yes No