Question: Primary Key of a different field in the same row

[TheBabu]

Hello, I was wondering on how to get the primary key of a different field, but in the same row as an editable section. This is my code

var $proj_table = $("#project-table");

//Load Table
create_table($proj_table, "php/sql_data.php", [{
    checkbox: true,
}, {
    field: "section_num",
    title: "Section #",
    sortable: true
}, {
    field: "project",
    title: "Project",
    editable: {
        placeholder: "Project",
        url: "php/save.php",
        success: function(echo) {
            console.log(echo);
        }
    }
}, {
    field: "owner",
    title: "Owner",
    editable: {
        placeholder: "Owner",
        url: "php/save.php",
        success: function(echo) {
            console.log(echo);
        }
    }
}, {
    field: "name_1",
    title: "Name #1",
    editable: {
        placeholder: "Name #1",
        url: "php/save.php",
        success: function(echo) {
            console.log(echo);
        }
    }
}, {
    field: "name_2",
    title: "Name #2",
    editable: {
        placeholder: "Name #2",
        url: "php/save.php",
        success: function(echo) {
            console.log(echo);
        }
    }
}]);

//Document Ready
$(function() {
    //Button Listeners
    $("#new-row").click(function() {
        new_row($proj_table, "php/new_row.php");
    });

    $("#delete-rows").click(function() {
        delete_rows($proj_table, "php/delete_rows.php", "post");
    });

    $("#toolbar").find("select").change(function() {
        $proj_table.bootstrapTable("destroy").bootstrapTable({
            exportDataType: $(this).val()
        });
    });
});

//Function Definitions
function create_table(table, url, columns)
{
    table.bootstrapTable({
        url: url,
        columns: columns
    });
}

function delete_rows(table, url, method) {
    var $selected_rows = table.bootstrapTable("getSelections");

    $.ajax({
        url: url,
        method: method,
        data: {
            selected_rows: $selected_rows,
        }
    });

    table.bootstrapTable("refresh");
}

function new_row(table, url) {
    $.ajax({
        url: url
    });

    table.bootstrapTable("refresh");
}

And my php code for php/save.php

<?php
$servername = "localhost";
$username   = "test";
$password   = "test";
$conn       = new mysqli($servername, $username, $password);

$table     = "project_data.projects";
$new_val   = $_POST["value"];
$field     = $_POST["name"];
$field_val = $_POST["pk"];

echo $new_val, " ";
echo $field, " ";
echo $field_val, " ";

//$conn->query("");
?>

In the third parameter of create_table function, you can see that that is the array for my columns, and in it I have the editable attribute. Now I am trying to figure out how does the pk attribute to work. Even if I set it to an random string, when I console log the values the pk method seems to be undefined. I want to be able to make it so that it prints out the value of "section_num" in the same row. Thank you.

[TheBabu]

Oh bruh I'm stupid... Better code:

//Document Ready
$(function() {
    var $proj_table = $("#project-table");

    //Load Table
    $proj_table.editable.defaults.url = "php/save.php";
    create_table($proj_table, "php/sql_data.php", [{
        checkbox: true
    }, {
        field: "ID",
        title: "ID",
        sortable: true
    }, {
        field: "project",
        title: "Project",
        editable: {
            title: "Project",
            placeholder: "Project"
        }
    }, {
        field: "owner",
        title: "Owner",
        editable: {
            title: "Owner",
            placeholder: "Owner"
        }
    }, {
        field: "name_1",
        title: "Name #1",
        editable: {
            title: "Name #1",
            placeholder: "Name #1"
        }
    }, {
        field: "name_2",
        title: "Name #2",
        editable: {
            title: "Name #2",
            placeholder: "Name #2"
        }
    }, {
        field: "status",
        title: "Status",
        editable: {
            title: "Status",
            type: "select",
            source: [
                {value: 0, text: "Not Selected"},
                {value: 1, text: "Not Started"},
                {value: 2, text: "WIP"},
                {value: 3, text: "Completed"}
            ],
            display: function(value, sourceData) {
                var colors     = {0: "Gray", 1: "#E67C73", 2: "#F6B86B", 3: "#57BB8A"};
                var status_ele = $.grep(sourceData, function(ele){ return ele.value == value; });

                $(this).text(status_ele[0].text).css("color", colors[value]);
            },
            showbuttons: false
        }
    }], "ID");

    //Button Listeners
    $("#new-row").click(function() {
        new_row($proj_table, "php/new_row.php");
    });

    $("#delete-rows").click(function() {
        delete_rows($proj_table, "php/delete_rows.php", "post");
    });
});

//Function Definitions
function create_table(table, url, columns, idField)
{
    table.bootstrapTable({
        url: url,
        columns: columns,
        idField: idField
    });
}

function delete_rows(table, url, method) {
    var $selected_rows = table.bootstrapTable("getSelections");

    $.ajax({
        url: url,
        method: method,
        data: {
            selected_rows: $selected_rows
        }
    });

    table.bootstrapTable("refresh");
}

function new_row(table, url) {
    $.ajax({
        url: url
    });

    table.bootstrapTable("refresh");
}