How can I pass my string data to JQUERY data table?

Question

0.00/5 (No votes)

See more:

I have a string returned from a function which is in JSON format.

Below is the text structure

[{"ID":89,"COMPLAINTTYPE":"Motherboard complaint","CTYPE_ABS":"Motherboardcomplaint"},{"ID":90,"COMPLAINTTYPE":"CMOS batter not working","CTYPE_ABS":"CMOSbatternotworking"},{"ID":91,"COMPLAINTTYPE":"Memory damaged","CTYPE_ABS":"Memorydamaged"},{"ID":92,"COMPLAINTTYPE":"SMPS damaged","CTYPE_ABS":"SMPSdamaged"}]

which consists three fields and values from database ID, COMPLAINTTYPE, CTYPE_ABS

How can I use this as data for a JQUERY Datatable?
I am new to JQUERY. I want to replace Datagrid with JQUERY Datatable
Kindly help

What I have tried:

I have created the JSON format form my VB.net Function

Public Function generatetabledata(sqlstr As String) As String
       Dim dt As New DataTable()
       Using con As New SqlConnection(IDvar.Constr)
           Using cmd As New SqlCommand(sqlstr, con)
               Dim jsondata As String
               con.Open()
               Dim da As New SqlDataAdapter(cmd)
               da.Fill(dt)
               Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
               Dim rows As New List(Of Dictionary(Of String, Object))()
               Dim row As Dictionary(Of String, Object)
               For Each dr As DataRow In dt.Rows
                   row = New Dictionary(Of String, Object)()
                   For Each col As DataColumn In dt.Columns
                       row.Add(col.ColumnName, dr(col))
                   Next
                   rows.Add(row)
               Next
               jsondata = (serializer.Serialize(rows))
               Return jsondata
               con.Close()
               cmd.Dispose()
               dt.Clear()
           End Using
       End Using
   End Function

I used below code to call Datatable

<script>

       $(document).ready(function () {
           $('#datatable-tabletools').DataTable({
               "ajax": {
                   "url": "datacall/GetCata",
                   "dataSrc": "",
                   "data": '<%= Session("ctypedata")%>'
               },
               "columns":  [
               { "data": "ID" },
               { "data": "COMPLAINTTYPE" },
               { "data": "CTYPE_ABS" } ]
           });
       });
       
</script>
     <table class="table table-bordered table-striped mb-none" id="datatable-tabletools" data-swf-path="assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
    <thead>
        <tr>
       
            <th>ID</th>
            <th>Complaint</th>
            <th>Ctype</th>
             
        </tr>
    </thead>
     
</table>

the JSON string is stored in

Session("ctypedata")

Posted 27-Nov-18 23:01pm

Member 14010375

Updated 28-Nov-18 18:53pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2018-11-28T04:32:00

Solution 1

ajax.data[^] is used to send additional data to the server - your Home/GetGata endpoint in this case. The server is then expected to return the data to display.

If you simply want to specify the data to display, don't use the ajax option. Either use the data option[^], or generate the table markup directly.

JavaScript

$(document).ready(function () {
    $('#datatable-tabletools').dataTable({
        "data": <%= Session("ctypedata") %>,
        "columns": [
            { "data": "ID" },
            { "data": "COMPLAINTTYPE" },
            { "data": "CTYPE_ABS" } 
        ]
    });
});

Posted 28-Nov-18 4:32am

Richard Deeming

Comments

Member 14010375 29-Nov-18 0:35am

Hi Richard,

Thank you for your response, I have tried this code but got an error as "Datatable cannot reinitialize"

Thanks Again

Richard Deeming 29-Nov-18 6:59am

3. Warning: Cannot reinitialise DataTable[^]
Sounds like you're trying to initialize the same table multiple times.

Member 14010375 2-Dec-18 1:56am

Hi Richard, Thank you so much, yes you were correct so I changed the table name. Now it is working fine with the below code

var dataSet = [ <%= Session("cdatatype")%>] ;
$(document).ready(function () {
$('#eg1').DataTable({
data: dataSet,
columns: [

{ title: "ID" },
{ title: "CTYPE" },
{ title: "CTYPE_ABS" }
]
});
});

Now I have a problem, whenever the Session("cdatatype") changes from the back end the table should redraw. How can I do that?

Richard Deeming 4-Dec-18 10:50am

What triggers the change?

You're loading it from the session, so it can only be changed by the current user, which means they presumably know when to refresh the table.

Member 14010375 9-Dec-18 7:21am

Thank you, Yes that is okay, I am inserting some data from backend and after the insert, the session variable will get the data again so after the insert i need to redraw the data table