Problem using Individual column searching (select inputs) via JSON
Problem using Individual column searching (select inputs) via JSON
wbjohnb
Posts: 2Questions: 1Answers: 0
I am trying to use Individual column searching (select inputs) in my app. I tested this the data local (within the HMTL file),
and all works well.
The problem is when loading the data from a DB using a JSON. When clicking on any of the column drop-downs, I only see part of the available data. Probably related, selecting one of the column options does not return any results.
Any help wold be greatly appreciated
Thanks
I wrote a quick app to demonstrate the problem:
honostech.com:8000/
$(document).ready(function () {
$('#testdata').dataTable(
{
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var select = $('<select><option value=""></option></select>').appendTo($(column.footer()).empty()).on
('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
}
);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
},
"ajax": {
url: USERS_LIST_JSON_URL
},
"scrollY": "400px",
"scrollCollapse": true,
"paging": true,
"select": true,
"processing": true,
"serverSide": true
});
});
{% load i18n staticfiles %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>City List</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript">
var USERS_LIST_JSON_URL = '{% url "cities_list" %}';
</script>
</head>
<body>
<table class="display table dataTable table-bordered table-striped" id="testdata" cellspacing="0" width="100%">
<thead>
<tr>
<th>City</th>
<th>State Abv</th>
<th>State</th>
<th>County</th>
<th>Alias</th>
</tr>
</thead>
<tfoot>
<tr>
<th>City</th>
<th>State Abv</th>
<th>State</th>
<th>County</th>
<th>Alias</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="{% static "js/citydata.js" %}"></script>
</body>
</html>
# -*- coding: utf8 -*-
from .models import cities
from django.views.generic import TemplateView
from django_datatables_view.base_datatable_view import BaseDatatableView
import os
import csv
class IndexView(TemplateView):
template_name = 'index.html'
class CitiesListJson(BaseDatatableView):
model = cities
columns = ['city', 'state_abv', 'state', 'county', 'alias']
order_columns = ['city', 'state_abv', 'state', 'county', 'alias']
def LoadSomeData(request):
pwd = os.path.dirname(__file__)
with open(pwd+'/cities.csv') as csvfile:
reader = csv.DictReader(csvfile)
for row in reader:
citydat = cities()
citydat.city = row['city']
citydat.state_abv = row['state_abv']
citydat.state = row['state']
citydat.county = row['county']
citydat.alias = row['alias']
citydat.save()
return
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The column search using select inputs is a client side process using this code to pull the data from the columns in the client data:
Since you are using server side processing the client doesn't have all of the data. You can change to using inputs as shown in this example to use with server side processing:
https://datatables.net/examples/api/multi_filter.html
Kevin
Makes sense I'd need to do something different given that I'm using server side processing, but I'm not quite clear on how to do that. The link you provided looks to be using local data as well, unless I'm missing something.
Thanks
It will work with server side processing because its not relying on client data. Datatables will send a request to the server for each search (key input) and update the table with the response.
I copied the example into a basic server side example:
http://live.datatables.net/wacuyuso/1/edit
Kevin
There is a catch with using
selectelements and server-side processing: the client-side builds the list of options from the data available to it, which is only a single page at a time.So you have two options
inputelement like in Kevin's exampleselectelements and build them from that data ininitComplete.Allan