Datatables requested unknown parameter '0' for row 0 - codeigniter

I've got this problem when i try to get data from clients table in the database
DataTables warning: table id=example - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
This is my Controller in Codeigniter
class Clients extends CI_Controller {
function header()
{
$data['hms'] = $this->config->item('page_title');
$this->load->view('header3',$data);
}
public function index()
{
//$this->datatables->select('*');
//$this->datatables->from('bookitguests');
//$data['clients'] = $this->datatables->generate();
$data = "";
$this->header();
$this->load->view('all_guests',$data);
}
public function TableClients()
{
$this->datatables->select('name, surname, email')->from('bookitguests');
echo $this->datatables->generate();
}
}
This is my view in Codeigniter (ps, im not adding the header file, its too long)
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function() {
$('#example').DataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "<?php base_url(); ?>clients/TableClients",
"sServerMethod": "POST"
} );
} );
</script>
<div id="container">
<h1>All Clients</h1>
<div id="body">
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>

You need to specify the columns explicitly when using an array of objects instead of a two dimensional array.
"columns": [
{ "data": "id" },
{ "data": "name" }
]
You can find more info here

Related

Why UI not displaying properly

I'm new to angular and I don't know why it looks odd (table not looks like proper ) while running snipet, it doesn't give me look and feel like datatable. I want to give it UI like this, i try to chnage version of css also, but it did not help. Can any one help me to solve this issue. Any help will be appreciated. Thanks in advance.
//Angularjs and jquery.datatable with ui.bootstrap and ui.utils
var app=angular.module('formvalid', ['ui.bootstrap']);
app.controller('validationCtrl',function($scope){
var table = $('#ajaxExample').DataTable({
"ajax" : {
"url": "http://datatable.getsandbox.com/datatable",
"dataSrc": "users",
"headers": "Content-Type : application/json"
},
"columns" : [
{ "data": "name" },
{ "data": "age" },
{ "data": "position" },
{ "data": "office" },
],
});
});
table tr th{
background:#337ab7;
color:white;
text-align:left;
vertical-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatable using jquery.datatable in angularjs</title>
<link rel='stylesheet prefetch'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch'
href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
</head>
<body>
<div class="container" ng-app="formvalid">
<div class="panel" data-ng-controller="validationCtrl">
<div class="panel-heading border">
<h2>Data table using jquery datatable in Angularjs</h2>
</div>
<div class="panel-body">
<table id="ajaxExample" class="display" width="100%" ui-jq="datatable" ui-options="ajaxOptions">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js'></script>
<script
src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
</body>
</html>
To attach bootstrap table styling from the dataTables.bootstrap.min.css file, you need to add classes to your table element.
class="table table-striped table-bordered"
Otherwise you get the standard bootstrap table styling.
If you use the HTML tab on the page you link to, it shows you how the table on that page is styled.

display data from io.socket in Slickgrid

I receive data from io.socket and I would like to put the data in an array of object so this can be displayed in the slickgrid. For some reason the data pushed in the info is empty. Could somebody help me with this?
Thanks!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid</title>
<link rel="stylesheet" href="/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="/examples/examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configurations</li>
</ul>
<h2>View Source:</h2>
<ul>
<li> View the source for this example on Github</li>
</ul>
</td>
</tr>
</table>
<script src="/lib/jquery-1.7.min.js"></script>
<script src="/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/slick.core.js"></script>
<script src="./slick.grid.js"></script>
<script>
var grid;
var info;
var info= [];
var columns = [
{id: "completed", name: "completed", field: "completed"},
{id: "createdAt", name: "createdAt", field: "createdAt"},
{id: "id", name: "id", field: "id"},
{id: "title", name: "title", field: "title"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
jQuery(function($){
var socket = io.connect();
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
})
});
grid = new Slick.Grid("#myGrid", info, columns, options);
</script>
</body>
</html>
When you update the data behind slickgrid you need to tell the grid to redraw with the new data:
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
grid.invalidate(); // not 100% sure this is needed....
grid.render();
})

How to pass value from view to controller

In controller i have function public ActionResult Index(int id,int test= 0,int to=10){} I try to change value test from view on click to get test+=10 but i dont know how. I tryed with action link and ajax but its not working. Any ideas?
My view code :
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Countries</title>
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<table>
<tr>
<td><h3>Matches</h3></td>
</tr>
<tr>
</tr>
#foreach (var i in Model.ListMatch)
{
<tr>
<td>#Html.ActionLink(i.Description, "", new { id = i.Id })</td>
</tr>
}
</table>
</div>
</body>
</html>
I return results to ng-view. Can i do something like
This question isn't explained very well, but from what I gather you want to be able to make a change to a value without reloading the page or leaving that view.
In order to do this you have to use AJAX. I know you said you tried AJAX but perhaps you got something wrong. Try this:
$('#yourbutton').click(function() {
$.post( "/YourController/YourFunction", function() {
alert( "success" );
});
});

There is no alert when submitting a form using .ajaxForm()

I have search already on google and come empty handed because all the answer that I found are not working for me for some reason, maybe there is someone out there that can look at my codess:
<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter — CKEditor Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
CKEDITOR.disableAutoInline = true;
$( document ).ready( function() {
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
} );
function setValue() {
$( '#editor1' ).val( $( 'input#val' ).val() );
}
</script>
</head>
<body>
<form id="f1" action="some.php" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Title:</td>
<td><input type="text" name="articletitle" id="articletitle" required/></td>
</tr>
<tr>
<td>Featured Image:</td>
<td><input name="MAX_FILE_SIZE" value="2097152" type="hidden">
<input name="image" id="image" type="file" required/></td>
</tr>
<tr>
<td colspan="3"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea></td>
</tr>
<tr>
<td><input id="save" type="submit" value="Save"></td>
<td><button id="reset">RESET</button></td>
</tr>
</table>
</form>
<script type="text/javascript">
$(document).ready(function(){
var options = {
success: function(){
//$("#articletitle").val("");
alert('HELLO');
}
};
$('#f1').ajaxForm(options);
//$("#button").click(function(){
// $('#f1').clearForm();
// alert("Successfully Added Record");
//});
});
</script>
</body>
</html>
I just want my user to have an alert so that they are aware that their form has been submitted.
If You want to show some of the message inside Ajax callback function You have to return some values in some.php using 'echo' and you have to put die();
eg.
echo '1'; die();
In jQuery You have to do like this:
$('#f1').ajaxForm(function(result){
if(result)
{
alert('Success');
});
// this is the id of the submit button
$("#submitButtonId").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

two jqgrid no data loaded

When I duplicate a working grid with a different id, data are not loaded in both grid.
Both grids are shown and they both query the same url. Json data is sent from php but data is not loaded into grid.
If i comment any of the grids, the other one loads data properly.
Any help greatly appreciated. I'm using jqgrid 4.4.1
Here is my code
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridInput () {
jQuery('#gridInput').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridInputPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridInput').jqGrid('navGrid','#gridInputPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript"> runOnLoad(LoadgridInput); </script>
<div id="gridInputWrapper">
<table id="gridInput"></table> <div id="gridInputPager"></div>
<div class="gridInputFooter"></div>
</div>
</div>
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridList () {
jQuery('#gridList').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridListPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridList').jqGrid('navGrid','#gridListPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript">runOnLoad(LoadgridList);</script>
<div id="gridListWrapper">
<table id="gridList"></table> <div id="gridListPager"></div>
<div class="gridListFooter"></div>
</div>
</div>

Resources