How can I add placeholder in jtable field

Question

name : {

    title : 'Name',
    width : '12%',
    sorting : true,
    searchable : true

 }

Here I want to add placeholder which suggest search by name.

Answer 1

There is no such functionality available currently in Jtable plugin, but you can add it by adding code in jquery.jtable.js file, just follow the steps:

Step 1: search for _normalizeFieldOptions , you will get following code

_normalizeFieldOptions: function (fieldName, props) {
        if (props.listClass == undefined) {
            props.listClass = '';
        }
        if (props.inputClass == undefined) {
            props.inputClass = '';
        }
        //add if condition here for placeholder change

        //Convert dependsOn to array if it's a comma seperated lists
        if (props.dependsOn && $.type(props.dependsOn) === 'string') {
            var dependsOnArray = props.dependsOn.split(',');
            props.dependsOn = [];
            for (var i = 0; i < dependsOnArray.length; i++) {
                props.dependsOn.push($.trim(dependsOnArray[i]));
            }
        }
    },

you need to add one if condition for placeholder, just replace following code with above code

_normalizeFieldOptions: function (fieldName, props) {
    if (props.listClass == undefined) {
        props.listClass = '';
    }
    if (props.inputClass == undefined) {
        props.inputClass = '';
    }
    if (props.placeholder == undefined) {
        props.placeholder = '';
    }//- for placeholder change


    //Convert dependsOn to array if it's a comma seperated lists
    if (props.dependsOn && $.type(props.dependsOn) === 'string') {
        var dependsOnArray = props.dependsOn.split(',');
        props.dependsOn = [];
        for (var i = 0; i < dependsOnArray.length; i++) {
            props.dependsOn.push($.trim(dependsOnArray[i]));
        }
    }
},

what does this code mean? This is for if placeholder is not defined in option then it will consider as empty string.

Step 2: Now you need to add the placeholder in Textbox field. So search for _createTextInputForField , you will get following code

_createTextInputForField: function (field, fieldName, value) {
    var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text" name="' + fieldName + '"></input>'); //change this line for placeholder
    if (value != undefined) {
        $input.val(value);
    }

    return $('<div />')
        .addClass('jtable-input jtable-text-input')
        .append($input);
},

Change first line in function for placeholder

var $input = $('<input class="' + field.inputClass + '" placeholder="' + field.placeholder + '" id="Edit-' + fieldName + '" type="password" name="' + fieldName + '"></input>');

Step 3: Repeat step 2 for _createTextAreaForField - for adding placeholder to Textarea field

Thats it! Now you can add placeholder option:

name : {
    title : 'Name',
    width : '12%',
    sorting : true,
    searchable : true,
    placeholder:'placeholder text'
}