Search code examples
javascriptjsondjango-rest-frameworkbootstrap-table

How to serialize Django model to match with format required by Bootstrap-tables plugin?


I'm trying to implement the bootstrap-table plugin with server side, I'm using Django rest framework to pass the data to the table but I always receive the message "No matching records found", doing some research I found that an specific format is required in order the plugin works (as can see in the documentation: Note that the required server response format is different depending on whether the 'client' or 'server' option is specified. See the following examples: Without server-side pagination, With server-side pagination) In my case I'm using the following code:

1) serializers.py

from rest_framework import serializers
from .models import Datos   

class DatosSerializer(serializers.ModelSerializer):
    class Meta:
        model = Datos            
        fields = (
            'loteInsp',
            'descripcion',
            'fecha',
            'material',
            'batch',
            'acepRech',
            'resultado',
            'limiteInferior',
            'target',
            'limiteSuperior',
            )

2) views.py

from rest_framework import generics
from .models import Datos
from .serializers import DatosSerializer

class DatosViewSet(generics.ListAPIView):
    queryset = Datos.objects.all().order_by('fecha')
    serializer_class = DatosSerializer

3) urls.py

 path('json/', DatosViewSet.as_view(), name='json'),

But with this configuration the result I obtain from the server looks like this in the console:

callback({"count":1064,"next":"http://127.0.0.1:8000/datos/json/?format=jsonp&limit=10&offset=0&order=asc&page=2&search=","previous":null,"results":[{"loteInsp":40004129308,"descripcion":"ALCANFOR P/P","fecha":"2015-01-03","material":15131132,"batch":"50602709L0","acepRech":true,"resultado":4.9,"limiteInferior":4.73,"target":5.26,"limiteSuperior":5.79},{"loteInsp":40004129308,"descripcion":"AC. DE EUCALIPTO P/P","fecha":"2015-01-03","material":15131132,"batch":"50602709L0","acepRech":true,"resultado":1.29,"limiteInferior":1.24,"target":1.33,"limiteSuperior":1.46},...

How do I have to modify the serializer (or other things) in order to obtain the response in the format required for bootstrap-tables?

example:

{
  "total": 800,
  "totalNotFiltered": 800,
  "rows": [
    {
      "id": 0,
      "name": "Item 0",
      "price": "$0"
    },
    {
      "id": 1,
      "name": "Item 1",
      "price": "$1"
    },
    {
      "id": 2,
      "name": "Item 2",
      "price": "$2"
    },
        ]
    }

Many thanks in advance for any suggestion or idea.


Solution

  • I have found a way to make bootstrap-table reads the data, I've modified the view DatosViewSet as follows:

    from rest_framework.response import Response
    from rest_framework.decorators import api_view
    
    @api_view(['GET',])
    def api_view_set(request):
        if request.method=='GET':
            datos = Datos.objects.all().order_by('fecha')
            serializer = DatosSerializer(datos, many=True)
            return Response(serializer.data)
    

    urls.py

    path('json2/', api_view_set, name='json2'),
    

    With this modifications now data is loaded in Bootstrap-table calling the url with this line in table header options:

    data-url="{% url 'app:json2'%}"