DataTable Example

1b:I[4594,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"BrandMark"] 1c:I[1566,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ThemeToggle"] 1d:I[9718,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"AccountMenu"] 1e:I[4113,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"LeftNavigation"] 1f:I[5608,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ResponsiveBannerAd"] 20:I[8424,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"TopicFollowButton"] 21:I[1577,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"FeedView"] 22:T4ec, DataTable Example

ID	Name	Price	Description

23:T1a80,{"content":[{"content":[{"text":"To integrate Django REST API with DataTables, you can use the ","type":"text"},{"marks":[{"type":"code"}],"text":"djangorestframework-datatables","type":"text"},{"text":" package. This package provides seamless integration between Django REST framework and DataTables, handling searching, filtering, ordering, and pagination.","type":"text"}],"type":"paragraph"},{"attrs":{"level":3},"content":[{"text":"Steps to Integrate Django REST API with DataTables","type":"text"}],"type":"heading"},{"content":[{"marks":[{"type":"bold"}],"text":"1. Install the Package","type":"text"},{"text":":","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"pip install djangorestframework-datatables","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"2. Update Your Settings","type":"text"},{"text":": ","type":"text"}],"type":"paragraph"},{"content":[{"text":"Add ","type":"text"},{"marks":[{"type":"code"}],"text":"'rest_framework_datatables'","type":"text"},{"text":" to your ","type":"text"},{"marks":[{"type":"code"}],"text":"INSTALLED_APPS","type":"text"},{"text":" and configure the REST framework settings:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"REST_FRAMEWORK = {\r\n 'DEFAULT_RENDERER_CLASSES': (\r\n 'rest_framework.renderers.JSONRenderer',\r\n 'rest_framework.renderers.BrowsableAPIRenderer',\r\n 'rest_framework_datatables.renderers.DatatablesRenderer',\r\n ),\r\n 'DEFAULT_FILTER_BACKENDS': (\r\n 'rest_framework_datatables.filters.DatatablesFilterBackend',\r\n ),\r\n 'DEFAULT_PAGINATION_CLASS': 'rest_framework_datatables.pagination.DatatablesPageNumberPagination',\r\n 'PAGE_SIZE': 50,\r\n}\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"3. Create a Model","type":"text"},{"text":": Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/models.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"Product","type":"text"},{"text":" model:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from django.db import models\r\n\r\nclass Product(models.Model):\r\n name = models.CharField(max_length=255)\r\n description = models.TextField()\r\n price = models.DecimalField(max_digits=10, decimal_places=2)\r\n stock = models.IntegerField()\r\n is_on_sale = models.BooleanField(default=False)\r\n created_at = models.DateTimeField(auto_now_add=True)\r\n updated_at = models.DateTimeField(auto_now=True)\r\n\r\n def __str__(self):\r\n return self.name\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"4. Create a Serializer","type":"text"},{"text":": Define a serializer for your model. Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/serializers.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"ProductSerializer","type":"text"},{"text":" serializer:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from rest_framework import serializers\r\nfrom .models import Product\r\n\r\nclass ProductSerializer(serializers.ModelSerializer):\r\n class Meta:\r\n model = Product\r\n fields = '__all__'\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"4. Create a View","type":"text"},{"text":": Create a viewset that uses your serializer. Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/views.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"ProductViewSet","type":"text"},{"text":" serializer:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from rest_framework import viewsets\r\nfrom .models import YourModel\r\nfrom .serializers import ProductSerializer\r\n\r\nclass ProductViewSet(viewsets.ModelViewSet):\r\n queryset = YourModel.objects.all()\r\n serializer_class = ProductSerializer","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"5. Configure URLs","type":"text"},{"text":": Add the view to your URLs:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from django.urls import path, include\r\nfrom rest_framework_datatables import views\r\n\r\nfrom products.views import *\r\n\r\nfrom rest_framework.routers import DefaultRouter\r\n\r\n\r\nrouter = DefaultRouter()\r\nrouter.register(r'products', ProductViewSet, basename='product_api')\r\n\r\nurlpatterns = [\r\n\r\n\tpath('admin/', admin.site.urls),\r\n path('api/v1/', include(router.urls)),\r\n]\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"6. Create the DataTables HTML","type":"text"},{"text":": Create an HTML table and initialize DataTables with the API endpoint:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"\r\n\r\n\r\n \r\n DataTable Example\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n\t\t\t\t \r\n \r\n \r\n \r\n

ID	Name	Price	Description

\r\n \r\n\r\n\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"text":"This setup will allow you to integrate DataTables with your Django REST API, providing features like searching, filtering, ordering, and pagination without modifying your existing API code ","type":"text"}],"type":"paragraph"}],"type":"doc"}14:[["$","a",null,{"href":"#main-content","className":"bg-brand fixed top-3 left-3 z-[100] -translate-y-20 rounded-lg px-4 py-2 font-semibold text-white transition focus:translate-y-0 dark:text-slate-950","children":"Skip to content"}],["$","header",null,{"className":"border-border bg-canvas/92 sticky top-0 z-40 border-b backdrop-blur-xl","children":["$","div",null,{"className":"mx-auto flex h-16 max-w-[1440px] items-center gap-3 px-4 sm:px-6","children":[["$","$L1b",null,{}],["$","form",null,{"role":"search","action":"/search","className":"relative ml-3 hidden max-w-xl flex-1 md:block","children":[["$","label",null,{"htmlFor":"global-search","className":"sr-only","children":"Search articles, tags and people"}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"text-ink-muted pointer-events-none absolute top-1/2 left-3 size-5 -translate-y-1/2","children":[["$","circle",null,{"cx":"11","cy":"11","r":"7"}],["$","path",null,{"d":"m20 20-4-4"}]]}],["$","input",null,{"id":"global-search","name":"q","type":"search","placeholder":"Search articles, tags and people","className":"border-border bg-surface placeholder:text-ink-muted/75 h-11 w-full rounded-xl border pr-4 pl-10 text-sm"}]]}],["$","div",null,{"className":"ml-auto flex items-center gap-2","children":[["$","$Ld",null,{"href":"/search","aria-label":"Search","className":"hover:bg-brand-soft grid size-11 place-items-center rounded-xl md:hidden","children":["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"size-5","children":"$14:1:props:children:props:children:1:props:children:1:props:children"}]}],["$","$L1c",null,{}],["$","div",null,{"className":"hidden sm:block","children":["$","$Ld",null,{"href":"/dashboard/posts/new","className":"bg-brand hover:bg-brand-strong inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-white transition dark:text-slate-950","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"size-4","children":[["$","path",null,{"d":"m4 20 4.5-1 10-10-3.5-3.5-10 10L4 20Z"}],["$","path",null,{"d":"m13.5 7 3.5 3.5"}]]}],"Write"]}]}],["$","$L1d",null,{}]]}]]}]}],["$","div",null,{"className":"mx-auto grid max-w-[1460px] grid-cols-1 gap-6 px-4 pt-6 pb-24 sm:px-6 lg:grid-cols-[220px_minmax(0,760px)] lg:pb-10 xl:grid-cols-[220px_minmax(0,760px)_300px]","children":[["$","$L1e",null,{}],["$","main",null,{"id":"main-content","tabIndex":-1,"className":"min-w-0","children":[["$","$L1f",null,{}],[["$","section",null,{"className":"border-border bg-surface rounded-2xl border shadow-[0_1px_2px_rgb(15_23_42/0.03)] mb-6 p-6 sm:p-8","children":["$","div",null,{"className":"flex flex-col gap-5 sm:flex-row sm:items-center","children":[["$","div",null,{"className":"bg-brand-soft text-brand relative grid size-20 shrink-0 place-items-center overflow-hidden rounded-2xl text-3xl font-bold","children":["$","span",null,{"aria-hidden":"true","children":"#"}]}],["$","div",null,{"className":"min-w-0 flex-1","children":[["$","p",null,{"className":"text-brand text-sm font-semibold","children":"Topic"}],["$","h1",null,{"className":"mt-1 text-3xl font-bold tracking-tight break-words","children":["#","datatables"]}],["$","p",null,{"className":"text-ink-muted mt-2 max-w-3xl leading-7","children":"Articles tagged datatables."}],["$","p",null,{"className":"text-ink-muted mt-3 text-sm","children":["1"," ","article"]}]]}],["$","$L20",null,{"topicId":200,"topicName":"datatables","initialFollowing":false,"initialFollowerCount":0,"authenticated":false,"returnTo":"/t/datatables"}]]}]}],["$","$L21",null,{"data":{"count":1,"next":null,"previous":null,"results":[{"id":113,"slug":"integrate-django-rest-api-with-datatables","title":"Integrate Django REST API with DataTables","excerpt":"To integrate Django REST API with DataTables, you can use the djangorestframework-datatables package. This package provides seamless integration between Django REST framework and D","content":[{"type":"richText","document":{"content":[{"content":[{"text":"To integrate Django REST API with DataTables, you can use the ","type":"text"},{"marks":[{"type":"code"}],"text":"djangorestframework-datatables","type":"text"},{"text":" package. This package provides seamless integration between Django REST framework and DataTables, handling searching, filtering, ordering, and pagination.","type":"text"}],"type":"paragraph"},{"attrs":{"level":3},"content":[{"text":"Steps to Integrate Django REST API with DataTables","type":"text"}],"type":"heading"},{"content":[{"marks":[{"type":"bold"}],"text":"1. Install the Package","type":"text"},{"text":":","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"pip install djangorestframework-datatables","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"2. Update Your Settings","type":"text"},{"text":": ","type":"text"}],"type":"paragraph"},{"content":[{"text":"Add ","type":"text"},{"marks":[{"type":"code"}],"text":"'rest_framework_datatables'","type":"text"},{"text":" to your ","type":"text"},{"marks":[{"type":"code"}],"text":"INSTALLED_APPS","type":"text"},{"text":" and configure the REST framework settings:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"REST_FRAMEWORK = {\r\n 'DEFAULT_RENDERER_CLASSES': (\r\n 'rest_framework.renderers.JSONRenderer',\r\n 'rest_framework.renderers.BrowsableAPIRenderer',\r\n 'rest_framework_datatables.renderers.DatatablesRenderer',\r\n ),\r\n 'DEFAULT_FILTER_BACKENDS': (\r\n 'rest_framework_datatables.filters.DatatablesFilterBackend',\r\n ),\r\n 'DEFAULT_PAGINATION_CLASS': 'rest_framework_datatables.pagination.DatatablesPageNumberPagination',\r\n 'PAGE_SIZE': 50,\r\n}\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"3. Create a Model","type":"text"},{"text":": Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/models.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"Product","type":"text"},{"text":" model:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from django.db import models\r\n\r\nclass Product(models.Model):\r\n name = models.CharField(max_length=255)\r\n description = models.TextField()\r\n price = models.DecimalField(max_digits=10, decimal_places=2)\r\n stock = models.IntegerField()\r\n is_on_sale = models.BooleanField(default=False)\r\n created_at = models.DateTimeField(auto_now_add=True)\r\n updated_at = models.DateTimeField(auto_now=True)\r\n\r\n def __str__(self):\r\n return self.name\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"4. Create a Serializer","type":"text"},{"text":": Define a serializer for your model. Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/serializers.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"ProductSerializer","type":"text"},{"text":" serializer:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from rest_framework import serializers\r\nfrom .models import Product\r\n\r\nclass ProductSerializer(serializers.ModelSerializer):\r\n class Meta:\r\n model = Product\r\n fields = '__all__'\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"4. Create a View","type":"text"},{"text":": Create a viewset that uses your serializer. Open ","type":"text"},{"marks":[{"type":"code"}],"text":"products/views.py","type":"text"},{"text":" and define your ","type":"text"},{"marks":[{"type":"code"}],"text":"ProductViewSet","type":"text"},{"text":" serializer:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from rest_framework import viewsets\r\nfrom .models import YourModel\r\nfrom .serializers import ProductSerializer\r\n\r\nclass ProductViewSet(viewsets.ModelViewSet):\r\n queryset = YourModel.objects.all()\r\n serializer_class = ProductSerializer","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"5. Configure URLs","type":"text"},{"text":": Add the view to your URLs:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"from django.urls import path, include\r\nfrom rest_framework_datatables import views\r\n\r\nfrom products.views import *\r\n\r\nfrom rest_framework.routers import DefaultRouter\r\n\r\n\r\nrouter = DefaultRouter()\r\nrouter.register(r'products', ProductViewSet, basename='product_api')\r\n\r\nurlpatterns = [\r\n\r\n\tpath('admin/', admin.site.urls),\r\n path('api/v1/', include(router.urls)),\r\n]\r\n","type":"text"}],"type":"codeBlock"},{"content":[{"marks":[{"type":"bold"}],"text":"6. Create the DataTables HTML","type":"text"},{"text":": Create an HTML table and initialize DataTables with the API endpoint:","type":"text"}],"type":"paragraph"},{"attrs":{"language":"python"},"content":[{"text":"$22","type":"text"}],"type":"codeBlock"},{"content":[{"text":"This setup will allow you to integrate DataTables with your Django REST API, providing features like searching, filtering, ordering, and pagination without modifying your existing API code ","type":"text"}],"type":"paragraph"}],"type":"doc"}}],"author":{"userId":2,"name":"Mahabubur Rahman","username":"mahabub.devs3","bio":"devs3 community author","profileImage":"https://res.cloudinary.com/dpoholbpp/image/upload/v1787830409/legacy/86/86f447343f0eca9c44fdce1082a8224c246f5171017a146786d90a266d449dde.png"},"tags":["django","integrate","datatables"],"publishedAt":"2024-11-23T16:31:13Z","updatedAt":"2026-08-26T13:09:37.718830Z","coverImage":"/static/assets/images/Placeholder.jpg","reactions":1,"comments":0,"views":592,"periodViews":"$undefined","readTime":2,"featured":false,"rawDetails":"$23"}],"source":"api"},"mode":"relevant","title":"Articles","eyebrow":"Explore #datatables","basePath":"/t/datatables","tag":"datatables","showModeTabs":true}]]]}],"$L24"]}],"$L25","$L26"]