ajax.json() question, any help would be appreciated

ajax.json() question, any help would be appreciated

xMan2xMan2 Posts: 16Questions: 1Answers: 0
edited March 2015 in Free community support

My debuge code -oxabuh
The DataTables page I'm referencing - https://datatables.net/reference/api/ajax.json()

What I have:
I'm new to DataTables and trying to get a couple things working.
1.) I'm using javascript to load up a dataset from a oracle table
2.) In my HTML I setup load DataTables

What my question is:
I have DataTables initialized and my dataset is displaying but DataTables doesn't appear to know things like how many rows I have and I think it's how I'm passing my ajax/json results to DataTables, but I don't know for sure.

Once I get things talking correctly, I'll just need to make one column editable and post result back to db when saving.

************** 1.) my javascript to load from oracle db *******************

function GetDetailTblValues() {
   //variables from my HTML dropdowns
      var cid = $('#CategoryId').val();
      var pid = $('#ProjectId').val();

    //send out to output screen for testing
      console.log(cid,pid);

    var model = { categoryId: cid, projectId: pid }
 
     $.ajax({
        url: gbDataURL,
        data: JSON.stringify(model),
        type: 'POST',
        async: true,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            //continue code if successful
            alert("ajax call was successful")
            //console.log(data);

           var table = '<tr>';
            //add headers
            table += '<th>Mantis#</th>';
            table += '<th>priority</th>';
            table += '<th>status</th>';
            table += '<th>build date</th>';
            table += '<th>summary</th>';
        
            $.each(data.results, function (i) {
                table += '<tr>';

                //data
                table += '<td>' + data.results[i].id + '</td>';
                table += '<td>' + data.results[i].priority + '</td>';
                table += '<td>' + data.results[i].status + '</td>';
                table += '<td>' + data.results[i].build + '</td>';
                table += '<td>' + data.results[i].Summary + '</td>';
                table += '</tr>';
                });
     
                 $('#results-grid').html(table);
          },

        error: function (data, status, error) {
            //error goes here
            alert("ajax call failed")
        }
    });

}

************** 2.) my HTML ****************

 <link rel="stylesheet" type="text/css" href="~/_assets/content/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="~/_assets/content/shCore.css">
    <link rel="stylesheet" type="text/css" href="~/_assets/content/demo.css">
    <style type="text/css" class="init">

    </style>
    <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="~/@app.jsPath/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="~/@app.jsPath/demo.js"></script>
    

<p>
    <img src="~/_assets/files/img/3.png" width="1000" height="100">
</p>


    <script type="text/javascript" language="javascript" class="init">
        $(document).ready(function ()
        {
            // Initialize my table
            
            var table = $('#results-grid').DataTable(
                {
                  
                    "bFilter": false,
                    "bSort": false,
                    "paging": false,
                    "ording":   false,
                    "info": false,
                    //"bPaginate": false,
                     //"bJQueryUI": true,
                     //"bDestroy": true,
                    // where n is the number of rows you wish to displ
                    //"bAutoWidth": false,
                    //"sWidth": "500px"
                    //"bServerSide": true,
                     });
                        });
    </script>






                        <style>
                       div.box1
             {
                position: absolute;
                 top: 80px;
                  left: 10px;
                     background-color: lightgray;
                      width:900px;
                        height:25px;
                         padding:5px;
                          border:1px solid gray;
                             margin:20px;
             }
                       </style>

               <div class="box1">




        @**************** start of dropdown list boxes*@
    <div>
        @*Main DIV*@

        <div>
            @*<h3 class="section-title">Category&nbsp&nbsp&nbsp&nbsp&nbsp&nbspProject</h3>*@
            Category
            <select id="CategoryId">
                <option value="0">EPM</option>
                <option value="1518">PBF</option>
                <option value="0">Financials</option>
                <option value="0">PowerPlant</option>
                <option value="0">Reporting</option>
                <option value="0">Treasury</option>
            </select>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            Project
            <select id="ProjectId">
                <option value="0">All Projects</option>
                <option value="0">EPS</option>
                <option value="0">EPS Enhancements</option>
                <option value="103">EPS Maintenance</option>
            </select>
            &nbsp&nbsp&nbsp
            <button id="Go" type="button" onclick="GetDetailTblValues()">Go</button>
            &nbsp&nbsp&nbsp&nbsp
            <button type="button" onclick="ClrDetailTblValues()">Clear table details</button>
            <br /><br />
        </div>
        @**************** end of dropdown list boxes*@
    </div>  
            
<script>
window.gbDataURL = '@Url.HttpRouteUrl("defaultApi", New With {.controller = "home", .action = "getMantixData", .httproute = True})';
</script>      
  
    
 @*If this script binding is placed some where else just make sure DOM is ready*@      
  <script src="~/@app.jsPath/dxj.js"></script>   
   
        

            <table id="results-grid" class="display" cellspacing="1" style="width:90%">
                    <thead>

                    <tr>
                        <th>Mantis#</th>
                        <th>priority</th>
                        <th>status</th>
                        <th>build</th>
                        <th style ="width:50%">summary</th>
                   </tr>

                </thead>

                @*Enter some blank rows*@
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                 
            </table>

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    I have DataTables initialized and my dataset is displaying but DataTables doesn't appear to know things like how many rows I have

    According to your debug trace you have 5 columns and 3 rows, all empty - which is coming from your "enter some blank rows" code.

    I don't see, beyond that, where you are adding the data. Use rows.add() if you want to add them via the API.

    Allan

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    I'm adding rows via my javascript function GetDetailTblValues(), listed first in my post. here's a code snippet. Also, I'll look at the rows.add function for the api.

    $.each(data.results, function (i) {
    table += '<tr>';

            //data
            table += '<td>' + data.results[i].id + '</td>';
            table += '<td>' + data.results[i].priority + '</td>';
            table += '<td>' + data.results[i].status + '</td>';
            table += '<td>' + data.results[i].build + '</td>';
            table += '<td>' + data.results[i].Summary + '</td>';
            table += '</tr>';
            });
    
             $('#results-grid').html(table);
    
  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin
    Answer ✓

    Sorry - I missed that as it was outside of the syntax highligthing. i've reformatted the post now (How to highlight code in Markdown).

    You are running into this FAQ. If the DataTable already exists you need to use the API (row.add() or rows.add() to add the new rows.

    Allan

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    Thanks Allan,
    That makes perfect sense. Basically all I'm doing in my javascript is building the dataset and telling datatables to display the finished dataset.

    When I start my site I have three blank rows and datatables shows my header properly and has a row count of three.

    OnClick I execute my javascript and datatables assumes my "#results-grid" header row is just another row and row count is still three.

    Still very new to this one and trying to get the row.add() api call to build my header row and data rows isn't working for me. Still trying to figure it out.

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin
    Answer ✓

    Something like:

    At top of GetDetailTblValues function:

    var table = $('#results-grid').DataTable();
    

    In the row creation loop:

    table.row.add( str );
    

    where str is the <tr> row you are creating.

    And finally at the end of GetDetailTblValues:

    table.draw();
    

    should do it.

    Allan

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    aruquf
    http://debug.datatables.net/aruquf

    hummmm
    I'm doing something goofy js is complaining that it can read the .add property in table.row.add().

    The datatables debugger is also saying I don't have API plug-in methods installed. I thought all I had to do there is add in my include, I think I'm almost there.

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    ******** put every thing in my html for this test

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    <link rel="stylesheet" type="text/css" href="~/_assets/content/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="~/_assets/content/shCore.css"> <link rel="stylesheet" type="text/css" href="~/_assets/content/demo.css"> @*<style type="text/css" class="init"> </style>*@ <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.js"></script> <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery-2.1.1.min.js"></script> <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="~/@app.jsPath/shCore.js"></script> <script type="text/javascript" language="javascript" src="~/@app.jsPath/demo.js"></script> @*<script type="text/javascript" language="javascript" class="init"> </script>*@ <style> div.box1 { position: absolute; top: 80px; left: 10px; background-color: lightgray; width:900px; height:25px; padding:5px; border:1px solid gray; margin:20px; } </style> <div class="box1"> @**************** start of dropdown list boxes*@ <div> @*Main DIV*@ <div> @*<h3 class="section-title">Category&nbsp&nbsp&nbsp&nbsp&nbsp&nbspProject</h3>*@ Category <select id="CategoryId"> <option value="0">EPM</option> <option value="1518">PBF</option> <option value="0">Financials</option> <option value="0">PowerPlant</option> <option value="0">Reporting</option> <option value="0">Treasury</option> </select> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Project <select id="ProjectId"> <option value="0">All Projects</option> <option value="0">EPS</option> <option value="0">EPS Enhancements</option> <option value="103">EPS Maintenance</option> </select> &nbsp&nbsp&nbsp <button id="Go" type="button" onclick="GetDetailTblValues_v2()">Go</button> &nbsp&nbsp&nbsp&nbsp <button type="button" onclick="clicker()">Clear table details</button> <br /><br /> </div> @**************** end of dropdown list boxes*@ </div> <script> window.gbDataURL = '@Url.HttpRouteUrl("defaultApi", New With {.controller = "home", .action = "getMantixData", .httproute = True})'; </script> @*If this script binding is placed some where else just make sure DOM is ready*@ <script src="~/@app.jsPath/dxj.js"></script> @*/*sets up default page header/*@ @*<table id="results-grid" class="detail-table" cellspacing="1" width="80">*@ <table id="results-grid" class="display" cellspacing="1" style="width:90%"> <thead> <tr> <th>Mantis#</th> <th>priority</th> <th>status</th> <th>build</th> <th style="width:50%">summary</th> </tr> </thead> @*Enter some blank rows*@ <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    ***********************My javascript

     <script>
        //$(document).ready(function () {
        //    // Initialize my table
        //    var table = $('#results-grid').DataTable(
        //        {
    
        //            "bFilter": false,
        //            "bSort": false,
        //            "paging": false,
        //            "ording": false,
        //            "info": true,
        //            //"bPaginate": false,
        //            //"bJQueryUI": true,
        //            //"bDestroy": true,
        //            // where n is the number of rows you wish to displ
        //            //"bAutoWidth": false,
        //            //"sWidth": "500px"
        //            //"bServerSide": true,
    
        //        });
    
    
        //});
    
    
    
         function GetDetailTblValues_v2() {
            
             var table = $('#results-grid').dataTable();
    
             var cid = $('#CategoryId').val();
             var pid = $('#ProjectId').val();
    
          
             //send out to output screen for testing
             console.log(cid, pid);
    
             var model = { categoryId: cid, projectId: pid }
    
           
    
             $.ajax({
                 url: gbDataURL,
                 data: JSON.stringify(model),
                 type: 'POST',
                 async: true,
                 contentType: 'application/json; charset=utf-8',
                 success: function (data) {
                     //continue code if successful
                     alert("ajax call was successful")
                     //console.log(data);
    
                     //var table = '<tr>';
                   
                     //add headers
                     //table += '<th>Mantis#</th>';
                     //table += '<th>priority</th>';
                     //table += '<th>status</th>';
                     //table += '<th>build date</th>';
                     //table += '<th>summary</th>';
                   
                     //table.add.row('<tr>');
                     
        
                     //table += '</tr> style=';
                     
                     //add body       
                     $.each(data.results, function (i) {
                         //table += '<tr>';
                        
                         //Allen***********
                         table.row.add('<tr>');
                         table.row.add('<td>' + data.results[i].id + '</td>');
                         table.row.add('<td>' + data.results[i].priority + '</td>');
                         table.row.add('<td>' + data.results[i].status + '</td>');
                         table.row.add('<td>' + data.results[i].build + '</td>');
                         table.row.add('<td>' + data.results[i].Summary + '</td>');
                         table.row.add('</tr>');
    
                         //table += '<td>' + data.results[i].id + '</td>';
                         //table += '<td>' + data.results[i].priority + '</td>';
                         //table += '<td>' + data.results[i].status + '</td>';
                         //table += '<td>' + data.results[i].build + '</td>';
                         //table += '<td>' + data.results[i].Summary + '</td>';
    
                         //table += '</tr>';
                       
                         
                     });
                     //display results                   
                     //$('#results-grid').html(table);
                     //Allen*****************
                     table.draw();
    
    
                    },
    
                 error: function (data, status, error) {
                     //error goes here
                     alert("ajax call failed")
                 }
             });
    
         }
        
            
    
    
         </script>
    
    
    
    
    
    </div>
    
  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    I was using dataTable(), instead of DataTable()

    Found this one in datatables help. Now, just need to format my td adds....got a bunch of garbage.

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    Got rid of the garbage, got one other error trying to work out. Then I'll upload the debug and post my final results.

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin
    edited March 2015 Answer ✓

    table.row.add('<tr>');
    ... etc

    That isn't quite right. Use just one row.add() call per row!

    table.row.add(
      '<tr>'+
        '<td>' + data.results[i].id + '</td>'+
        '<td>' + data.results[i].priority + '</td>'+
        ...
      '</tr>'
    );
    

    Allan

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    Thanks Allan I'll change that. Here's what I currently have and it's working.

                        table.row.add([
                                data.results[i].id,
                                    data.results[i].priority,
                                        data.results[i].status,
                                            data.results[i].build,
                                                data.results[i].Summary
                                        ])
    

    But I like your syntax better

  • xMan2xMan2 Posts: 16Questions: 1Answers: 0

    Thanks again Allan, all my questions have been answered for this thread.

    I'll go do some reading now, I only have one other piece to add for this table and that's to make one column editable with write back to my db.

    -xMan2

  • allanallan Posts: 63,364Questions: 1Answers: 10,449 Site admin

    But I like your syntax better

    Actually - your method is more performant! I only suggested the other method as that is what you are already using so I thought it would be easier to use.

    Passing in an array of data as you are (or objects if you were using object based tables) means that DataTables doesn't need to read the data back from the DOM which makes things much faster.

    Allan

This discussion has been closed.