Any help for the following

Any help for the following

kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

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.

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Hi,

       Cheers for the info.
    
  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0
    edited 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>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

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

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

    Allan

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited 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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited October 2021

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

  • kkvbsureshkkvbsuresh Posts: 32Questions: 6Answers: 0

    Hi,

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

Sign In or Register to comment.