Datatables プラグイン ( http://www.datatables.net ) と Datatables Editor ( http://editor.datatables.net ) を使用していくつかのテーブルをセットアップしました。
エディターを既存のテーブルに統合しようとしていますが、すべての編集フィールド (ポップアップ) で未定義になります。
私が持っているものとジェネレーターのダウンロードとの唯一の違いは、aoColumns の設定です。
これは私が現在持っているものです：
"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "Name" },
{ "sTitle": "Surname" },
{ "sTitle": "Email" }
しかし、エディターコードには次のものがあります:
"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "Name" },
{ "mDataProp": "Surname" },
{ "mDataProp": "Email" }
「sTitle」を「mDataProp」に変更すると、テーブルが読み込まれなくなりました。
私は明らかにこれについて間違った方向に進んでいます...これに関する方向性は非常に高く評価されます。
編集：
ここに私の完全なコードがあります:
<script type="text/javascript">
function fnShowHide( iCol ){
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = jQuery('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
(function($){
$(document).ready(function() {
var aDataSet = [
var aDataSet = [
['805',
'Emelia',
'Smith',
'emelia_s@yahoo.com'
],
['804',
'david',
'Davies',
'ddavies@yahoo.co.uk'
],
];
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.wp_newsletter.php",
"domTable": "#example",
"fields": [
{
"label": "First Name",
"name": "name",
"type": "text"
},
{
"label": "Last Name",
"name": "surname",
"type": "text"
},
{
"label": "Email Address",
"name": "email",
"type": "text"
}
]
} );
var oTable;
var oTable = $('#example').dataTable( {
"sDom": '<"postbox full"<W>><"clear"><"postbox full"<C><T>><"clear"><"postbox full"<lfr>><"clear"><"postbox full"<t>>ip',
"oColumnFilterWidgets": {
"aiExclude": [ 0,1,2,3,6,7,9 ],
},
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"bSortClasses": false,
"aaData": aDataSet,
"oLanguage": {
"sSearch": "Search all columns:"
},
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
},
"aoColumns": [
{ "sTitle": "id" },
{ "sTitle": "Name" },
{ "sTitle": "Surname" },
{ "sTitle": "Email" },
{
"sTitle": "Admin",
"sClass": "center",
"sDefaultContent": '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
}
],
} );
oTable.fnSetColumnVis( 7, false );
oTable.fnSetColumnVis( 8, false );
oTable.fnSetColumnVis( 9, false );
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
editor.create(
'Create new record',
{ "label": "Add", "fn": function () { editor.submit() } }
);
} );
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );
// Delete a record (without asking a user for confirmation)
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.remove( $(this).parents('tr')[0], '123', false, false );
editor.submit();
} );
var asInitVals = new Array();
$("#filter input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("#filter input").index(this)+1 );
//console.log($("#filter input").index(this)+1);
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("#filter input").each( function (i) {
asInitVals[i] = this.value;
} );
$("#filter input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("#filter input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("#filter input").index(this)];
}
} );
} );
}(jQuery));
</script>