Giter VIP home page Giter VIP logo

django_serverside_datatable's Introduction

Django Serverside Datatable

Downloads

This is a simple package that let you use Server-side Datatable in your Django Project

Supports datatable features such as Pagination, Search, etc...

Install

pip install django-serverside-datatable

How to use

Create a django View that inherits from ServerSideDatatableView. Example (backend):

# views.py

from django_serverside_datatable.views import ServerSideDatatableView


class ItemListView(ServerSideDatatableView):
	queryset = models.Item.objects.all()
	columns = ['name', 'code', 'description']


# urls.py
# add the following line to urlpatterns

path('data/', views.ItemListView.as_view()), 

Example (frontend):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	</head>
	<body>
		<h1>Items</h1>
		<hr>
		<table id="items-table">
			<thead>
				<tr>
					<th>Name</th>
					<th>Code</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>

		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
		<script language="javascript">
			$(document).ready(function () {
				$('#items-table').dataTable({
					serverSide: true,
					sAjaxSource: "localhost:8000/data/",  // new url
                                        columns: [
                                            {name: "name", data: 0},
                                            {name: "code", data: 1},
                                            {name: "description", data: 2},
                                        ],
				});
			});
		</script>
	</body>
</html>

For further customization of Datatable, you may refer the Datatable official documentation.

django_serverside_datatable's People

Contributors

umesh-krishna avatar umeshk-19 avatar umeshkrishna19 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.