1

I'm using a datatable with server-side-scripting to show records on button click. The first time the button is clicked I am getting the response properly but the second time the button is clicked ajax is calling.

I have also used a draw function for it.

My ajax call js file:

$(document).on('click' , '.search-btn', function(){

var shape = "";
jQuery(".diamond_shape.diamond_selected").each(function () {
    shape += jQuery(this).attr("title") + ",";
});

var clarity = '';
jQuery("#select-clarity").each(function () {
    clarity += jQuery(this).attr("value") + ",";
});

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var dataTable = $('#example').DataTable( {
        processing: true,
        serverSide: true,
        retrieve: true,
        searching: false,   
        paging: false,
        dataType: "json",
        contentType: "application/json",
        "ajax":{
            "url" : ajaxurl, // json datasource 
            "type": "POST",
            "data": {action: 'getFilterDiamonds',dataShape: shape , dataClarity : clarity },
        },
        "columns": [
            {"data": "reportNo"},
            {"data": "reference"},
            {"data": "shape"},  
            {"data": "lab"},
            {"data": "weight"},
            {"data": "color"},
            {"data": "clarity"}
        ]
    });
    });

How I add the selected filter value in the input value attribute:

ProgrammerPer
  • 1,125
  • 1
  • 11
  • 26
Jayesh
  • 161
  • 11
  • What is the code which is written on button click? This is only datatable initialization code – Vishal Apr 17 '19 at 09:13
  • i'm using filter form from where user can select option and according to it on click button user can see result without page refresh. – Jayesh Apr 17 '19 at 09:16
  • i was just edited my code with onclick function – Jayesh Apr 17 '19 at 09:20
  • I believe you have written all the code under $(document).on('click' , '.search-btn', function(){..... }); If i'm not wrong – Vishal Apr 17 '19 at 09:23
  • yes, because on filter option click i'm adding it's value in one inputbox so at the end of submit button i can get all filtered selected values. – Jayesh Apr 17 '19 at 09:34
  • So on first page load there is no datatable available? It's available only when user clicks on the button ? If that is a case then code should work on first button click only because it's written that way only. – Vishal Apr 17 '19 at 09:41
  • yes,on first page load there is no datatable available. when i click on button with filter i can get the result but second time changing filter and trying to resubmit button but that time ajax is not working. – Jayesh Apr 17 '19 at 09:53
  • Why do you have php tags inside your js code? You should [localize your script and add ajaxurl there](https://developer.wordpress.org/reference/functions/wp_localize_script/). Also don't add generic classes for elements that you attach custom events to. If you have `.search-btn` anywhere else on the site it would trigger ajax. Use `js-load-something` instead (notice `js-` prefix). – dingo_d Apr 17 '19 at 10:08
  • using i can get ajax file link to call ajax in wordpress, and i have only one submit button with class. – Jayesh Apr 17 '19 at 10:12
  • Firstly when you say submit button be sure it's type is submit ie. type=submit otherwise it is just another button. Secondly as i said you have initialized the datatable on click event so datatable will only load on first button click.. Refactor your code initialize your datatable on page load and write a function to refresh the datatable on button click by passing new post data ie shape , clarity in your case – Vishal Apr 17 '19 at 10:24

2 Answers2

2
  • Finally found solution. just want to destroy datatable when click on search button. here is my code with changes.
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";

$(document).on('click' , '.search-btn', function(){

    var shape = "";
    jQuery(".diamond_shape.diamond_selected").each(function () {
        shape += jQuery(this).attr("title") + ",";
    });

    var clarity = '';
    jQuery("#select-clarity").each(function () {
        clarity += jQuery(this).attr("value") + ",";
    });

    /*- code to destory datatable -*/
    if ($.fn.dataTable.isDataTable('#example')) {
        $('#example').DataTable().destroy();
    }   
    /*---*/

    var dataTable = $('#example').DataTable( {
        "scrollX": true,
        processing: true,
        serverSide: true,
        retrieve: true,
        searching: false,
        destroy: true,  
        paging: false,
        dataType: "json",
        contentType: "application/json",
        "ajax":{
            "url" : ajaxurl, // json datasource 
            "type": "POST",
            "data": {action: 'getFilterDiamonds',dataShape: shape , dataClarity : clarity },
        },
        "columns": [
            {"data": "reportNo"},
            {"data": "reference"},
            {"data": "shape"},  
            {"data": "lab"},
            {"data": "weight"},
            {"data": "color"},
            {"data": "clarity"}
        ]
    });


});

using following code datatable will erase old data and load new data with filter. Must have to set destroy: true in datatable function.

if ($.fn.dataTable.isDataTable('#example')) {
        $('#example').DataTable().destroy();
    }

Thank you all for your quick response.

Jayesh
  • 161
  • 11
  • your solution is perfect ..but in my scenario .. I m doing dynamic pagination..so if I click on 3rd page then if I set destroy: true then data will load for page 3 bt in pagination ..it will show on the 1 page selected every time...please help... tried lots of efforts but not getting any solution. – Rinku Choudhary Jul 14 '20 at 06:24
0

You have initialized the Datatable on click event, It is the root cause of why it's not working on second click. Also please check browser console you should be getting some error there.

Please refer Reload Ajax request with new parameters and refactor the code according to your need.

Vishal
  • 639
  • 7
  • 32
  • not getting any error in console and first time i'm getting ajax call response but on second time call not getting ajax call in browser's network tab. – Jayesh Apr 17 '19 at 11:25