datatables editor

suser

I follow this link to create table and edit rows
http://kingkode.com/free-datatables-editor-alternative/#comment-1129

i try this

<script type="text/javascript">
        debugger;

        alert("1");
        debugger;

        $(function () {
            $.ajax({
                type: "POST",
                url: "Maintenance.aspx/data_call",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    debugger;
                   // var table_data = result.d;
                   // var d = result.d;
                    alert("12");

                    debugger;

                    var re = JSON.parse(result.d).response;
                    debugger;

                    console.log(JSON.parse(result.d).response);
                    debugger;

                  
                    $("#example").empty()

                    if(re.length >0)
                    {
                        $("#example").append
                        ("<thead><tr><th>RegionID</th><th>Region</th><th>StartDate</th><th>EndDate</th>");

                        for (var i = 0; i < re.length; i++)
                        {
                            if(re[i]!==null)
                            {
                                $("#tabledata").append("<tbody><tr><td>" +
                                    re[i][0] + "</td><td>" +
                                    re[i][1] + "</td><td>" +
                                    re[i][2] + "</td><td>" +
                                    re[i][3] + "</td></tr></tbody>");
                            }
                        }


                    }

                    var myTable;
                    debugger;

                    myTable = $('#example').DataTable({
                        "sPaginationType": "full_numbers",
                        data: re,
                        //columns: columnDefs,
                        dom: 'Bfrtip',
                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }], // Needs button container
                        select: 'single',
                        responsive: true,
                        altEditor: true,     // Enable altEditor
                        buttons: [{
                            text: 'Add',
                            name: 'add'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Edit',
                            name: 'edit'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Delete',
                            name: 'delete'      // do not change name
                        }]

                    });

                },
                error: function (error) {
                    debugger;
                    var r = error.responseText;
                    var errorMessage = r.Message;
                     alert(errorMessage);
                     alert(r);
                     alert(Error);
                }
            });
        });

    </script>

```

links
 ```
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"src ="js/altEditor/dataTables.altEditor.free.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"/> 
      <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"/>
      <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"/> 

  <style type="text/css">
    table.dataTable tbody>tr.selected,
    table.dataTable tbody>tr>.selected {
      background-color: #A2D3F6;
    }
  </style> 

Only headers is display on page and this show error on console

Uncaught TypeError: Cannot read property 'DT_RowId' of null

allan

You'd probably need to contact the author of the original post if you think there is a problem with their code.

Allan

suser

i think this is datatable code? @allan

suser

ok i try this
i write data: result,
instead of
data:re

and this show like this please check image

this show

No data available in table

where as i get data in result @allan

suser

OK now i try to simplify this more
and i writedata:result.d,
instead of data:result

but this show an alert

**Datatable warning:table id=example - Requested unknown parameter '1' for row 0 , column 1 . For more information about this error , please see http://datatables.net/tn/4**

and there is blank rows in table instead of actual data @allan