Liferay portlet and datatables ajax load on search

Question

I have a MVC liferay portlet, and I use serveResource() for handle ajax call by JSP

Now, my problem is that I want call ajax function to populate datatables when I click on search button.

I have

<portlet:resourceURL var="ajaxResourceUrl"/>

This button fire after that I fill 6 input fields but it didn't work now! it return me an undefined message

$("#idPulsanteRicerca").click(function(){ 
    oTable.fnReloadAjax();
});

I get correctly data from the serveResurce method on portlet load, but I want pass form parameters on click button event that I mentioned above and reload the datatable

 $(document).ready(function() {
    var oTable=$("#jqueryDataTable").dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<%=ajaxResourceUrl%>",
            "bJQueryUI": true,
            "aoColumns": [
                { "mData": "repositoryItem" },
                { "mData": "regionalNode" },
                { "mData": "localNode" },
                { "mData": "docName" },
                { "mData": "effectiveTime" }
            ]
        });

Have Anyone just make this? Tnx for answer

Does your click function make the ajax call as expected? It looks like it should. If it does, you don't want to source the data table with an ajax call since the ajax call is made by clicking the button. Instead, you should just call jQuery('#example').dataTable in your success handler on the ajax call, passing in the returned data as the data parameter. — clav
– clav, Commented Sep 30, 2014 at 19:06

markpsmith · Accepted Answer · 2014-10-01 13:34:58Z

1

Your question isn't terribly clear, but I'll assume you're trying to pass parameter(s) to a server-side method which populates a datatable, which needs to happens on $("#idPulsanteRicerca").click().

Fundamental to this is the modification of the datasource (`ajaxResourceUrl'?) so it knows what to do with the parameters. I have no idea what liferay is but the principle should still apply.

In the datatable initialisation code, use fnServerParams, to specify the extra parameters that you are going to pass:

...
"sAjaxSource": "<%=ajaxResourceUrl%>",
"fnServerParams": function (aoData) {
     aoData.push({ "name": "param1", "value": $('#myselector').val() });
     aoData.push({ "name": "param2", "value": $('#myselector2').val() });
},
"bJQueryUI": true,
...

In your click event, you call fnDraw() to reload the data:

$("#idPulsanteRicerca").click(function(){ 
    oTable.fnDraw();
});

As mentioned previously, you will need to modify the source method to get the new parameters and include them in the filtering, e.g

var newparam1 = Request.QueryString["param1"];

answered Oct 1, 2014 at 13:34

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maforast Over a year ago

Tnx for answer I'm following this way I give u a response when just it work

Collectives™ on Stack Overflow

Liferay portlet and datatables ajax load on search

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related