Datatable datasource on selection change how to bind

[jineshsvccamParticipant]

i am trying to populate the table when the combobox selection changes
I am using Asp.net webmethod to fetch the data from database.. in that part there is no problem.
but i don’t know how to bind the json data to jqdatatable. i am getting the json object in the alert box but no data is displaying inside the table

<script type="text/javascript">
            $(document).ready(function () {
                $('#dlcustomers').change(function () {
                    var obj = {};
                    obj.cusID = $.trim($("[id*=dlcustomers]").val());
                    source = {
                        datatype: "json",
                        datafields: [
                                        { name: 'CompanyName' },
                                        { name: 'ContactName' },
                                        { name: 'ContactTitle' },
                                        { name: 'City' },
                                        { name: 'Country' },
                                        { name: 'Address' }
                                        ]
                                  };

                    $.ajax({
                        type: "POST",
                        url: "DataWebService.asmx/GetCustomersfn",
                        data: JSON.stringify(obj),
                        //data: "{ cusID: '" + $.trim($("[id*=dlcustomers]").val()) + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                         var obj = JSON.parse(data.d);
                        // alert(obj.customers[1].City);
                         $("#dataTable").append(obj);
                            source.localdata = obj;
                        },
                        error: function (error) {
                            alert("error");
                        }
               });

                    var dataAdapter = new $.jqx.dataAdapter(source);
                       $("#dataTable").jqxDataTable(
                                {
                                    width: 850,
                                    height: 400,
                                    source: dataAdapter,
                                    pagerButtonsCount: 10,
                                    pageable: true,
                                    columnsresize: true,
                                    altRows: true,
                                    filterable: true,
                                    sortable: true,
                                    filtermode: 'advanced',
                                    // pagerMode: 'advanced',
                                    //  groups: ['City'],
                                    columns: [
                                        { text: 'Company Name', dataField: 'CompanyName', width: 250 },
                                        { text: 'Contact Name', dataField: 'ContactName', width: 150 },
                                        { text: 'Contact Title', dataField: 'ContactTitle', width: 180 },
                                        { text: 'Address', dataField: 'Address', width: 180 },
                                        { text: 'City', dataField: 'City', width: 80 },
                                        { text: 'Country', dataField: 'Country', width: 100 }
                                    ]
                                });
                });
            });
</script>

my json data is as follows

{"customers" : [{"CustomerID":"OLDWO","CompanyName":"Old World Delicatessen","ContactName":"Rene Phillips","ContactTitle":"Sales Representative","Address":"2743 Bering St.","City":"Anchorage","Region":"AK","PostalCode":"99508","Country":"USA","Phone":"(907) 555-7584","Fax":"(907) 555-2880"},{"CustomerID":"WANDK","CompanyName":"Die Wandernde Kuh","ContactName":"Rita Müller","ContactTitle":"Sales Representative","Address":"Adenauerallee 900","City":"Stuttgart","Region":"NULL","PostalCode":"70563","Country":"Germany","Phone":"0711-020361","Fax":"0711-035428"},{"CustomerID":"WARTH","CompanyName":"Wartian Herkku","ContactName":"Pirkko Koskitalo","ContactTitle":"Accounting Manager","Address":"Torikatu 38","City":"Oulu","Region":"NULL","PostalCode":"90110","Country":"Finland","Phone":"981-443655","Fax":"981-443655"},{"CustomerID":"WELLI","CompanyName":"Wellington Importadora","ContactName":"Paula Parente","ContactTitle":"Sales Manager","Address":"Rua do Mercado, 12","City":"Resende","Region":"SP","PostalCode":"08737-363","Country":"Brazil","Phone":"(14) 555-8122","Fax":"NULL"},{"CustomerID":"WHITC","CompanyName":"White Clover Markets","ContactName":"Karl Jablonski","ContactTitle":"Owner","Address":"305 - 14th Ave. S. Suite 3B","City":"Seattle","Region":"WA","PostalCode":"98128","Country":"USA","Phone":"(206) 555-4112","Fax":"(206) 555-4115"},{"CustomerID":"WILMK","CompanyName":"Wilman Kala","ContactName":"Matti Karttunen","ContactTitle":"Owner/Marketing Assistant","Address":"Keskuskatu 45","City":"Helsinki","Region":"NULL","PostalCode":"21240","Country":"Finland","Phone":"90-224 8858","Fax":"90-224 8858"},{"CustomerID":"WOLZA","CompanyName":"Wolski Zajazd","ContactName":"Zbyszek Piestrzeniewicz","ContactTitle":"Owner","Address":"ul. Filtrowa 68","City":"Warszawa","Region":"NULL","PostalCode":"01-012","Country":"Poland","Phone":"(26) 642-7012","Fax":"(26) 642-7012"}]}

where should i make changes to get the desired output

[adminKeymaster]

Hi jineshsvccam,

For binding jqxDataTable to JSON, please learn from this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-binding-to-json.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts