datatable editor dependent field example

datatable editor dependent field country state example ,datatable editor dependent field dynamic category subcategory example

113

We all are looking for one of the toughest search on internet about How to use datatable editor dependent field use as dynamic category and subcategory way. like dependent field in country state or dependent field in state city etc.

we have 1000’s of use cases where we need this code snippet for our system use.

In this post we are making it very simple and clear implementation so that you can use it easily with minimum effort.

 

datatable editor dependent field example

This post is showing how to make use dependent() field field in datatable editor in its one of its simplest forms.

Its Implementations can be greatly expanded to include multiple layers of cascading/dynamic multiple select lists, multiple separate cascades, and complex form control for showing elements based on user value selection from previous input box. If you have other uses for dependent() field and you can comment – we’ll all get benefit from it!

Implementation :

Server Side :

<?php
include_once( $_SERVER[‘DOCUMENT_ROOT’].”/Dashboard/php/DataTables.php” );

$countries = $db
->select( ‘cities’, [‘id as value’, ‘name as label’], [‘state_id’ => $_REQUEST[‘values’][‘state’]] )
->fetchAll();

echo json_encode( [
‘options’ => [
‘country’ => $countries
] ] );

?>

 

 

Database : 

State city Database table with id and name

Client Side PHP : 

function init ( json ) {

editor = new $.fn.dataTable.Editor( {

ajax: “examples/php/csrprojecttes.php”,

table: “#example”,
template: ‘#customForm’,
fields: [ {
label: ‘Order:’,
def: “10”,
name: ‘csrproject.camp_order’,
fieldInfo: ‘This field can only be edited via click and drag row reordering.’
},{
label: “Project Status:”,
name: “csrproject.camp_status”,
type: “checkbox”,
separator: “|”,
options: [
{ label: ”, value: 1 }
] },
{

label: “Project Name:”,
name: “csrproject.pname”

},
{
label: “Function/Domain:”,
name: “csrproject.functions”,
type: “select”,
multiple: true,
separator: ‘,’,
placeholder: “– Select Domains –“,
// multiple: true,
// separator: ‘,’,

},

{
label: “State:”,
name: “state”,
type: “select”,
placeholder: “– Select State –“,

options: json.stateOptions
// multiple: true,
// separator: ‘,’,

},
{
label: “City:”,
name: “city”,
multiple: true,
separator: ‘,’,
type: “select”,
placeholder: “– Select City –“,
// multiple: true,
// separator: ‘,’,

},

{

label: “Project Detail/Summary:”,
name: “csrproject.pdetail”,
type:”textarea”

},

{
label: “Project Budget:”,
name: “csrproject.budget”,
type: “select”,
// multiple: true,
// separator: ‘,’,
placeholder: “– Select Budget –“,
// multiple: true,
// separator: ‘,’,

},
{
label: ‘Project Start date:’,
name: ‘csrproject.startdate’,
// label: ‘Updated date:’,
// name: ‘updated_date’,
type: ‘datetime’,
def: function () { return new Date(); },
format: ‘dddd D MMMM YYYY’,
fieldInfo: ‘Starts from 00:00 AM’,
keyInput: false

},
{
label: ‘Project End date:’,
name: ‘csrproject.enddate’,
// label: ‘Updated date:’,
// name: ‘updated_date’,
type: ‘datetime’,
def: function () { return new Date(); },
format: ‘dddd D MMMM YYYY’,
fieldInfo: ‘End from 00:00 AM’,
keyInput: false

},

{

label: “NGO:”,
name: “csrproject.ngo”,

},
{

label: “NGO Years in Operation :”,
name: “csrproject.ngoyears”,

},
{

label: “NGO Legal Status :”,
name: “csrproject.legal”,

},
{

label: “Benificiaries :”,
name: “csrproject.benificiaries”,

},
{

label: “Project Search Tags :”,
name: “csrproject.searchtags”,

},

] }

);

editor.dependent( ‘state’, ‘/cities’ );

var table = $(‘#example’).DataTable( {

dom: “Bfrtip”,

//ajax: “examples/php/csrprojecttes.php”,
// contentType: “application/json; charset=utf-8”,
columns: [
{ data: ‘csrproject.camp_order’, className: ‘reorder’ },

{ data: “csrproject.pname” },
{ data: “csrproject.ngo” },
{ data: “csrproject.ngoyears” },
{ data: “csrproject.legal” },
{ data: “csrproject.benificiaries” },
{ data: “domains.name” },
{
data: ‘state’,
render: function ( d ) {
return json.state[ d ];
}
},
{
data: ‘city’,
render: function ( d ) {
return json.city[ d ];
}
}
// { data: “states.name” },
//{ data: “cities.name” },
{ data: “csrproject.pdetail” },

{ data: “budget.bfrom” },

{ data: “csrproject.startdate” },
{ data: “csrproject.enddate” },

{ data: “csrproject.searchtags” },

{
data: “csrproject.camp_status”,
render: function ( data, type, row ) {
if ( type === ‘display’ ) {
return ‘<input type=”checkbox” class=”editor-active”>’;
}
return data;
},
className: “dt-body-center”
}
],
select: {
style: ‘single’
},
buttons: [
{ extend: “create”, editor: editor },
{ extend: “edit”, editor: editor },
{ extend: “remove”, editor: editor }
]

}

$(document).ready( function () {
$.ajax( {
url: ‘examples/php/csrprojecttes.php’,
dataType: ‘json’,
success: function ( json ) {
init( json );
}
} );
} );

 

For our more posts about datatable editor you can check our below links for better understanding

How to upload on aws s3 from data-table editor

 

Datatable Editor multiple select option with separator

 

http://readbuds.com/category/coding/datatable-editor/

 

· · · · · ·


Related Articles & Comments

Leave a Comment

Your email address will not be published. Required fields are marked *