File
Add library
Share
Login or Register
Help
HTMLSaved
 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables Editor - masterdata</title>
​
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">
        <link rel="stylesheet" type="text/css" href="css/select2.min.css">
​
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.tableTools.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/select2.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/table.masterdata.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>
                DataTables Editor - masterdata
            </h1>
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="masterdata" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>CUSTOMER</th>
                    </tr>
                </thead>
            </table>
​
        </div>
    </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
​
div.container {
  min-width: 980px;
  margin: 0 auto;
}
​
​
JavaScriptSaved
 
(function($){
​
$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        "ajax": "php/table.masterdata.php",
        "table": "#masterdata",
        "fields": [
            {
                "label": "ID",
                "name": "ID",
                "type": "text"
            },
            {
                "label": "CUSTOMER",
                "name": "CUSTOMER",
                "type": "select2",
                "ipOpts": [
                    {
                        "label": "a",
                        "value": "a"
                    },
                    {
                        "label": "b",
                        "value": "b"
                    }
                ]
            }
        ]
    } );
​
    $('#masterdata').dataTable( {
        "dom": "Tfrtip",
        "ajax": "php/table.masterdata.php",
        "columns": [
            {
                "data": "ID"
            },
            {
                "data": "CUSTOMER"
            }
        ],
        "tableTools": {
            "sRowSelect": "os",
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );
} );
​
}(jQuery));
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers