Seamless integration between Django REST framework and Datatables (https://datatables.net) with supporting Datatables editor
Project description
Overview
This package provides seamless integration between Django REST framework and Datatables with supporting Datatables editor.
It handles searching, filtering, ordering and most usecases you can imagine with Datatables.
You don’t have to create a different API, your API still work exactly the same .
How to use
Install
$ pip install djangorestframework-datatables-editorConfiguration
To enable Datatables support in your project, add 'rest_framework_datatables_editor' to your INSTALLED_APPS, and modify your REST_FRAMEWORK settings like this:
REST_FRAMEWORK = {
'DEFAULT_RENDERER_CLASSES': (
'rest_framework.renderers.JSONRenderer',
'rest_framework.renderers.BrowsableAPIRenderer',
'rest_framework_datatables_editor.renderers.DatatablesRenderer',
),
'DEFAULT_FILTER_BACKENDS': (
'rest_framework_datatables_editor.filters.DatatablesFilterBackend',
),
'DEFAULT_PAGINATION_CLASS': 'rest_framework_datatables_editor.pagination.DatatablesPageNumberPagination',
'PAGE_SIZE': 50,
}For using Datatables editor you should use DatatablesEditorModelViewSet instead ModelViewSet or add EditorModelMixin to your views.
And that’s it !
Your API is now fully compatible with Datatables and will provide searching, filtering, ordering and pagination without any modification of your API code ! For using Datatables editor you should use DatatablesEditorModelViewSet instead ModelViewSet or add EditorModelMixin to your views.
Configuring Datatables and Datatables editor
The URL for connecting datatables is the URL of your view with ?format=datatables
The URL connecting datatables editor is the URL of your view with editor/
Full documentation will be available soon.
Also you’ll need download Datatables editor.
Example of HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rolling Stone Top 500 albums of all time</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.0/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/static/css/editor.bootstrap4.min.css">
</head>
<body>
<div class="container" style="font-size: .9em;">
<div class="row">
<div class="col-sm-12">
<table id="albums" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Rank</th>
<th>Artist</th>
<th>Album name</th>
<th>Year</th>
<th>Genres</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="/static/js/dataTables.editor.js"></script>
<script src="/static/js/editor.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: "/api/albums/editor/?format=datatables",
table: "#albums",
fields: [{
label: "rank",
name: "rank",
}, {
label: "artist:",
name: "artist.id",
type: "select"
}, {
label: "name:",
name: "name",
}, {
label: "year:",
name: "year",
}]
});
var table = $('#albums').DataTable({
"serverSide": true,
dom: "Bfrtip",
"ajax": "/api/albums/?format=datatables",
"columns": [
{"data": "rank", "searchable": false},
{"data": "artist.name", "name": "artist.name"},
{"data": "name"},
{"data": "year"},
{"data": "genres", "name": "genres.name", "sortable": false},
],
select: true,
buttons: [
{extend: "create", editor: editor},
{extend: "edit", editor: editor},
{extend: "remove", editor: editor}
]
});
table.buttons().container()
.appendTo($('.col-md-6:eq(0)', table.table().container()));
});
</script>
</body>
</html>Thanks
The project is based on the project django-rest-framework-datatables by David Jean Louis
Requirements
Python (2.7, 3.4, 3.5, 3.6)
Django (1.11, 2.0, 2.1)
Django REST Framework (3.9)
Example project
To play with the example project, just clone the repository and run the dev server.
$ git clone https://github.com/VVyacheslav/DRF-datatables-editor.git
$ cd django-rest-framework-datatables-editor
$ pip install -r requirements-dev.txt
$ python example/manage.py runserver
$ firefox http://127.0.0.1:8000Testing
Install development requirements.
$ pip install -r requirements-dev.txtRun the tests.
$ python example/manage.py testYou can also use the excellent tox testing tool to run the tests against all supported versions of Python and Django. Install tox globally, and then simply run:
$ toxIf you want to check the coverage, use:
$ coverage run ./example/manage.py test
$ coverage report -m
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for djangorestframework-datatables-editor-0.2.0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 729449fe6e758731427b5f603509eb1868cdbb8b2d850cf27393d63ef4bb3d5c |
|
| MD5 | 0da3f4bd99355aa7491b0a1fa983263a |
|
| BLAKE2b-256 | a434cb5349a857fb79e5722b9a4bae4e3c814ec369e66197adcdca215840315e |
Hashes for djangorestframework_datatables_editor-0.2.0-py2.py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 1347e667ad7335aec574366aef0e406b56544856906eb96302a34209251e12e3 |
|
| MD5 | 4c74a04475be76d81c41cc4fa5306e31 |
|
| BLAKE2b-256 | d2701902facc1561a58731ad5d1c5863f5f7cf8d9de8487f0e5e01e5c6540372 |
