Any help for the following

kkvbsuresh · September 2021

Link to test case: http://live.datatables.net/xediwavu/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi,

How to solve to replace the data source as pure html instead of JSON ?

Looking for a kind help from anybody.

allan · September 2021

Do you mean you want to Ajax get HTML for the table? You could make your own Ajax call, then insert it into the document and finally initialise the DataTable on that. DataTables' own ajax option doesn't support HTML structured data.

Allan

kkvbsuresh · October 2021

Hi,

   Cheers for the info.

kkvbsuresh · October 2021

Hi,

  Anybody able to solve the following

1) The checkbox only appear to the first page. Needs to appear to the entire table.

2) Because of the above the the clear button only clears the visible page only.

at

http://live.datatables.net/poxiduhu/1/edit

or

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
     <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
   <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>

<script>

$(document).ready( function () {
  var table = $('#example').DataTable();
  $( "tr td:nth-child(1)" ).append("<input type='checkbox' />").addClass('class1').table.draw();
} );

$('#check-box-clear').on('click', function() {
   $('input:checkbox').removeAttr('checked');
});

</script>
  </head>
  <body>
    <button id="check-box-clear">check-box-clear</button>
    <div class="container">
      <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>$342,000</td>
            </tr>
            
            <tr>
                <td></td>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>37</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td></td>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>$235,500</td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
    </div>
  </body>
</html>

allan · October 2021

$('input:checkbox').removeAttr('checked');

Will only select the elements in the document. You need to use:

$('input:checkbox', table.rows().nodes()).removeAttr('checked');

Allan

kkvbsuresh · October 2021

Hi,

     The first need is

1) The checkbox only appear to the first page. Needs to appear to the entire table.

http://live.datatables.net/poxiduhu/1/edit

tangerine · October 2021

Your test case doesn't work as you have numerous errors. You need to provide a working test case.

kkvbsuresh · October 2021

Hi,

        Here is the new test case at

http://live.datatables.net/fuwukaja/1/edit

The problem is

1) The checkbox only appear to the first page. Needs to appear to the entire table.

Any solution ?

kthorngren · October 2021

Use columns.render to build the checkboxes for each row. Use the technique Allan suggested to uncheck all checkboxes. See the updated example:
http://live.datatables.net/fuwukaja/2/edit

Kevin

kkvbsuresh · October 2021

Hi,

   Thanks and cheers.

Any help for the following

1) The custom search for age column by a custom search input NOT WORKING

at

http://live.datatables.net/fuwukaja/3/edit

kthorngren · October 2021

You are getting this error in the browser's console:

VM51:22 Uncaught ReferenceError: table is not defined

One option is to move the event handler inside the document.ready() function so it is in the same scope as the var table = .. assignment. Or you can get an instance of the API like this:
http://live.datatables.net/fuwukaja/5/edit

Also note the age column index is 4 not 3. This is fixed in the updated example.

Kevin

kkvbsuresh · October 2021

Hi,

Cheers & Thanks.

Any help for the following

1) The clear custom search for age NOT WORKING

at

 http://live.datatables.net/fuwukaja/6/edit

kthorngren · October 2021

You are clearing the global search. You need to clear the column search, like this:

$('#example').DataTable().column(4).search( "" ).draw();

See the updated example:
http://live.datatables.net/fuwukaja/7/edit

Kevin

kkvbsuresh · October 2021

Hi,

Thanks & Cheers.

Any help for the following

1) The clear custom Range search for age NOT WORKING

at

http://live.datatables.net/yixoxede/13/edit

kthorngren · October 2021

You are getting these two errors in the browser's console when clicking the clear button:

runner:1 Uncaught ReferenceError: ClearFilters is not defined
at HTMLButtonElement.onclick

Uncaught ReferenceError: ionRangeSlider is not defined

You have this button:

<button value="ClearFilters" onclick="ClearFilters(age_filter);window.location.reload(true);" id="age-filter">Clear Age Search</button>

But you don't have the ClearFilters() function that is being called. This is not a Datatables function. You will need to refer to the docs and support for the Range Slider library for help with that library.

Kevin

kkvbsuresh · October 2021

Hi,

Thanks & Cheers.

(no third party libraries just jquery)

Any help for the following

1) The clear custom Range search for age NOT WORKING

at

http://live.datatables.net/nufuqona/1/edit

tangerine · October 2021

As Kevin has already explained to you, you are calling a "ClearFilters" function which does not exist.

kkvbsuresh · October 2021

Hi,

Is there a way to refresh and reload the html table with a button click ?

colin · October 2021

When you say reload, are you getting the data from Ajax or just in the DOM. If just in the DOM, you can call destroy() and then reinitialise the table; if Ajax, you can call ajax.reload(),

Colin

Any help for the following

Any help for the following

Answers

Howdy, Stranger!

Categories

DataTables

Any help for the following

Any help for the following

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables