1

I am using jquery datatable to view table data from the Backend in html for Rails App

enter image description here

When I select any record/row using checkbox to submit on back end let say from page 1, & checked few items on page 2 & hit confirm button.Items received at the back end is only the current page.

For example if checked items from page 2 & hit the confirm button , items submitted to back end is only from page 2 which was checked, & If checked items from page 1 & hit the confirm button, items submitted to backend is only from page 1 which was checked.

As Expected behavior I am trying to achieve is on submitting confirm , Data tables should transmitted checked items across the page, which is not currently happening.

Can Anyone help , Is this achievable by Data-tables or it is bug in library. All suggestion are welcome.

3
  • This question has nothing to do with ruby, I have the tag removed. Commented Oct 20, 2016 at 6:50
  • @Hard Is confirm button action is an AJAX call? Commented Oct 20, 2016 at 7:55
  • No, It is not Ajax Call Commented Oct 20, 2016 at 8:10

2 Answers 2

2

If it is server side pagination, it is not achievable.

UPDATE

If it is client side pagination, you can append all the selected checkbox values in on submit jQuery action method and process it in server.

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

1 Comment

It is client side pagination , all record are render on client side on page load , If I checked 2 record on page 1 & 2 record on page 2 both the checked record remained until request is submitted to server.
1

As @manivel mentioned correctly, if you're using server-side processing, it's not possible.

With client-side processing, there are couple ways to do it.

SOLUTION 1: Submit form directly

The trick is to turn form elements from pages other than current into <input type="hidden"> before submitting the form.

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

// Handle form submission event
$('#frm-example').on('submit', function(e){
   var form = this;

   // Encode a set of form elements from all pages as an array of names and values
   var params = table.$('input,select,textarea').serializeArray();

   // Iterate over all form elements
   $.each(params, function(){
      // If element doesn't exist in DOM
      if(!$.contains(document, form[this.name])){
         // Create a hidden element
         $(form).append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      }
   });
});

See this example for code and demonstration.

SOLUTION 2: Submit form via Ajax

Another solution is to submit the form via Ajax.

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

// Handle form submission event
$('#frm-example').on('submit', function(e){
   // Prevent actual form submission
   e.preventDefault();

   // Serialize form data
   var data = table.$('input,select,textarea').serialize();

   // Submit form data via Ajax
   $.ajax({
      url: '/echo/jsonp/',
      data: data,
      success: function(data){
         console.log('Server response', data);
      }
   });
});

See this example for code and demonstration.

NOTES

Please note that both solutions will work in client-side processing mode only.

LINKS

See jQuery DataTables: How to submit all pages form data for more details.

1 Comment

Thanks a lot Gyrocode.com , It's working now as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.