datatable-django-datetimepicker

dt-django-picker.py

** Date time field -> https://github.com/monim67/django-bootstrap-datepicker-plus

** Datatables and Django -> https://pypi.org/project/django-datatables-view/

** Forms.py Buttons and Feilds -> https://django-crispy-forms.readthedocs.io/en/latest/install.html



Context
*** -> dt_json - url for datatable
*** -> form_cdr - form element

URL.py
-----------------
url(r'^cdr_list_json/$', CDRListJson.as_view(), name='cdr_list_json'),

Views.py
----------------
class CDRListJson(BaseDatatableView):
    model = Cdr

    columns = [
        'ani',
        'destination_number',
        'start_stamp',
        'duration',
        'sip_hangup_disposition'
    ]
    
    order_columns = [
        'start_stamp',
        'duration',
    ]
    
    max_display_length = 20

    def render_column(self, row, column):
        if column == "start_stamp":
            return row.start_stamp.strftime('%d %b %Y %H:%M')
        elif column == "destination_number":
            return row.destination_number.strip('+')
        elif column == "ani":
            return row.ani.strip('+')
        else:
            return super(CDRListJson, self).render_column(row, column)

    def get_initial_queryset(self):
        return Cdr.objects.by_tenant(self.request.session.get('tenant'))

    def filter_queryset(self, qs):
        params = self.request.GET

        search = params.get('sSearch')
        if search:
            qs = qs.filter(
                    Q(cli__icontains=search) | Q(cld__icontains=search))

        start_date = params.get('start_date', '')
        if start_date:
            print("start_date",start_date)
            qs = qs.filter(start_stamp__gte=datetime.strptime(start_date, DATE_FORMAT))

        end_date = params.get('end_date', '')
        if end_date:
            qs = qs.filter(start_stamp__lte=datetime.strptime(end_date, DATE_FORMAT))

        cli = params.get('cli','')
        print("cli")
        if cli:
            qs = qs.filter(ani__icontains=cli)

        return qs

------------------

Forms.py
-----------------
from django import forms
from django.utils.translation import ugettext_lazy as _
from crispy_forms.helper import FormHelper, Layout
from crispy_forms.layout import Field, Submit, Reset,  Row, Column
from crispy_forms.bootstrap import FormActions
from bootstrap_datepicker_plus import DateTimePickerInput

DATE_FORMAT = '%d-%m-%Y %H:%M'

class CdrFilterForm(forms.Form):
    ajaxType = forms.CharField(initial='form_cdr')
    quick_data_select = forms.ChoiceField(
        label='Quick Date Select',
        choices=(
            (7, 'Last 7 Days'),
            (30,'Last 30 Days'),
            (60,'Last 60 Days'),
            (90,'Last 90 Days'),
        ),
        required=False,
    )

    start_date = forms.DateTimeField(
        label='Start Date', required=False, input_formats=[DATE_FORMAT], widget=DateTimePickerInput(format=DATE_FORMAT))

    end_date  = forms.DateTimeField(
        label='End Date', required=False, input_formats=[DATE_FORMAT], widget=DateTimePickerInput(format=DATE_FORMAT))
                
    cli = forms.CharField(
        label='CLI', required=False,)
    
    cld = forms.CharField(
        label='CLD', required=False,)

    def __init__(self, *args, **kwargs):
        super(CdrFilterForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.form_id = 'filter_form'
        self.helper.form_method = 'post'
        self.helper.form_action = '.'

        self.helper.layout = Layout(
            Row(
                Column('cli', css_class='form_group col-md-6 mb-0'),
                Column('cld', css_class='form_group col-md-6 mb-0'),
                css_class='form-row'
            ),
            Row(
               Column( 'quick_data_select', css_class='form_group col-md-4 mb-0'),
               Column( Field('start_date', placeholder='From (mm dd yyyy h:m:s)'), css_class='form_group col-md-4 mb-0'),
               Column( Field('end_date', placeholder='To', step='any'), css_class='form_group col-md-4 mb-0'),
               css_class='form-row'
            ),
            FormActions(
                Submit('submit', 'Filter'),
                Reset('reset', 'Reset'),
            ),
            Field('ajaxType', type='hidden'),

        )
            
-----------------------------


Datatable settings html
-----------------------------

$(document).ready(function() {
    var cdr_table = $('#cdr_table').dataTable( {
        "iDisplayLength": 15,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "{{ data }}", // url
        // Disable sorting for the Tags and Delete columns.
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,1,4 ] } ]
    });
    ** send form parameter and get url for datatable
    var frm = $('#filter_form'); 
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                // Reload the table data. This function is located in
                // scripts/scripts.js.
              cdr_table.fnReloadAjax(data);
                // Re-enable the submit button.
                $('#submit-id-submit').prop('disabled', false);
            },
            error: function(data) {
                alert('Sorry, something went wrong. Please try again.');
            }
        });
        return false;
    });
 
});