how can i do this on a data table

how can i do this on a data table

makumbimakumbi Posts: 2Questions: 1Answers: 0
edited February 2022 in DataTables

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Please help what i want i SHOULD BE IN POSITION TO EDIT the Names field just in case i want to change the Name in field Name and edit the House Field and then Make Admno and ACNOS Read only Fields. and also i wanted to know whether in implment any change like after changing the values in stream the event of after update should be fired to update a particular storedprocedure

Note Class, Stream ,STDTYPE should appear as comboxes which have values to be selected from the list
ADMNO NAME CLASS STREAM HOUSE STDTYPE ACNOS
14-04352 ABDULNASSIR NYLA P6 F Red Old 01-14-416
14-04640 ABAHO MELANIE P6 D Red Old 01-14-041
15-04793 ABANITWE ASHLEY P6 D Blue Old 01-14-104
15-04802 ABIGAIL NAWANGO NABAGALA P6 F Yellow Old 02-14-158
15-04805 ACENG GABRIELLA HAZEL P6 L Blue Old 01-14-2

** @Code
    Layout = Nothing
End Code
<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div style="width: 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>ADMNO</th>
                    <th>NAME</th>
                    <th>CLASS</th>
                    <th>STREAM</th>
                    <th>HOUSE</th>
                    <th>STDTYPE</th>
                    <th>ACNOS</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url:"/StudentList/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable({
                bLengthChange: true,
                lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true,
                data: response,
                columns: [
                    { 'data': 'ADMNO' },
                        { 'data': 'NAME' },
                        { 'data': 'CLASS' },
                        { 'data': 'STREAM' },
                        { 'data': 'HOUSE' },
                        { 'data': 'STDTYPE' },
                        { 'data': 'ACNOS' }]
            });
        };
    </script>
</body>
</html> **:

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • makumbimakumbi Posts: 2Questions: 1Answers: 0
    edited February 2022
     @Code
    Layout = Nothing
    End Code
    
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    </head>
    <body>
    <div style="width: 500px">
    <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
    <thead>
    <tr>
    <th>ADMNO</th>
    <th>NAME</th>
    <th>CLASS</th>
    <th>STREAM</th>
    <th>HOUSE</th>
    <th>STDTYPE</th>
    <th>ACNOS</th>
    </tr>
    </thead>
    <tbody></tbody>
    </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
    <script type="text/javascript">
    $(function () {
    $.ajax({
    type: "POST",
    url:"/StudentList/AjaxMethod",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
    alert(response.d);
    },
    error: function (response) {
    alert(response.d);
    }
    });
    });
    function OnSuccess(response) {
    $("#tblCustomers").DataTable({
    bLengthChange: true,
    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
    bFilter: true,
    bSort: true,
    bPaginate: true,
    data: response,
    columns: [
    { 'data': 'ADMNO' },
    { 'data': 'NAME' },
    { 'data': 'CLASS' },
    { 'data': 'STREAM' },
    { 'data': 'HOUSE' },
    { 'data': 'STDTYPE' },
    { 'data': 'ACNOS' }]
    });
    };
    </script>
    </body>
    </html> `
    

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 14,618Questions: 1Answers: 2,497

    Are you using Editor to edit these fields? That can have a combination of editable and read-only fields. Plus, you can use events to trigger your stored procedure.

    Colin

Sign In or Register to comment.