a4amaan/api.py

## api.py

class JSONViewMixin(object):
    def json_response(self, data, status=200):
        return JSONResponse(self.request, data, status=status)


class DataTableView(JSONViewMixin, View):
    def get(self, request, *args, **kwargs):
        params = request.GET
        sort_col_num = params.get('iSortCol_0', 0)
        sort_col_name = params.get('mDataProp_{0}'.format(sort_col_num), None)
        search_text = params.get('sSearch', '').lower()
        sort_dir = params.get('sSortDir_0', 'asc')
        start_num = int(params.get('iDisplayStart', 0))
        num = int(params.get('iDisplayLength', 25))
        obj_list = Accountants.objects.all()
        sort_dir_prefix = (sort_dir == 'desc' and '-' or '')

        if sort_col_name:
            obj_list = obj_list.order_by('{0}{1}'.format(sort_dir_prefix, sort_col_name))

        filtered_obj_list = obj_list
        if search_text:
            filtered_obj_list = self.data = Accountants.objects.filter(
                Q(first_name__icontains=search_text) | Q(last_name__icontains=search_text) |
                Q(acc_title__icontains=search_text) | Q(city__icontains=search_text)
            )

        city_id = params.get('city_id', None)
        if city_id:
            filtered_obj_list = filtered_obj_list.filter(city=city_id)

        data_list = []
        for object in filtered_obj_list:
            obj = {
                'first_name': object.first_name,
                'last_name': object.last_name,
                'address': object.address,
                'city': object.city,
            }
            data_list.append(obj)

        d = {
            "iTotalRecords": obj_list.count(),
            "iTotalDisplayRecords": filtered_obj_list.count(),
            "sEcho": params.get('sEcho', 1),
            "data": [obj for obj in data_list[start_num:(start_num + num)]]
        }

        return self.json_response(d)

## datatable.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body>
<br/>
<br/>
<select id="city_id">
    <option value=""></option>
    <option value="Lahore">Lahore</option>
    <option value="Islamabad">Islamabad</option>
    <option value="Karachi">Karachi</option>
</select>
<br/>
<br/>
<br/>
<table id="example">
    <thead>
    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Address</th>
        <th>City</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>

    $(document).ready(function () {

        var table = $('#example').DataTable({

            "pageLength": 10,
            "aaSorting": [[1, "asc"]],
            "sAjaxSource": "http://127.0.0.1:8000/api/asd/dt/",
            "aoColumns": [
                {"data": "first_name"},
                {"data": "last_name"},
                {"data": "address"},
                {"data": "city"}
            ],
            "bServerSide": true,
            "fnServerParams": function (aoData) {
                aoData.push({name: "city_id", value: $("#city_id option:selected").val()});
            }

        });


        $('#city_id').change(function () {
            table.draw();
        });

    });


</script>

</body>
</html>

	class JSONViewMixin(object):
	def json_response(self, data, status=200):
	return JSONResponse(self.request, data, status=status)


	class DataTableView(JSONViewMixin, View):
	def get(self, request, args, *kwargs):
	params = request.GET
	sort_col_num = params.get('iSortCol_0', 0)
	sort_col_name = params.get('mDataProp_{0}'.format(sort_col_num), None)
	search_text = params.get('sSearch', '').lower()
	sort_dir = params.get('sSortDir_0', 'asc')
	start_num = int(params.get('iDisplayStart', 0))
	num = int(params.get('iDisplayLength', 25))
	obj_list = Accountants.objects.all()
	sort_dir_prefix = (sort_dir == 'desc' and '-' or '')

	if sort_col_name:
	obj_list = obj_list.order_by('{0}{1}'.format(sort_dir_prefix, sort_col_name))

	filtered_obj_list = obj_list
	if search_text:
	filtered_obj_list = self.data = Accountants.objects.filter(
	Q(first_name__icontains=search_text) \| Q(last_name__icontains=search_text) \|
	Q(acc_title__icontains=search_text) \| Q(city__icontains=search_text)
	)

	city_id = params.get('city_id', None)
	if city_id:
	filtered_obj_list = filtered_obj_list.filter(city=city_id)

	data_list = []
	for object in filtered_obj_list:
	obj = {
	'first_name': object.first_name,
	'last_name': object.last_name,
	'address': object.address,
	'city': object.city,
	}
	data_list.append(obj)

	d = {
	"iTotalRecords": obj_list.count(),
	"iTotalDisplayRecords": filtered_obj_list.count(),
	"sEcho": params.get('sEcho', 1),
	"data": [obj for obj in data_list[start_num:(start_num + num)]]
	}

	return self.json_response(d)
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
	</head>
	<body>
	<br/>
	<br/>
	<select id="city_id">
	<option value=""></option>
	<option value="Lahore">Lahore</option>
	<option value="Islamabad">Islamabad</option>
	<option value="Karachi">Karachi</option>
	</select>
	<br/>
	<br/>
	<br/>
	<table id="example">
	<thead>
	<tr>
	<th>First name</th>
	<th>Last name</th>
	<th>Address</th>
	<th>City</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
	<script>

	$(document).ready(function () {

	var table = $('#example').DataTable({

	"pageLength": 10,
	"aaSorting": [[1, "asc"]],
	"sAjaxSource": "http://127.0.0.1:8000/api/asd/dt/",
	"aoColumns": [
	{"data": "first_name"},
	{"data": "last_name"},
	{"data": "address"},
	{"data": "city"}
	],
	"bServerSide": true,
	"fnServerParams": function (aoData) {
	aoData.push({name: "city_id", value: $("#city_id option:selected").val()});
	}

	});


	$('#city_id').change(function () {
	table.draw();
	});

	});


	</script>

	</body>
	</html>