Everytime I load Datatables I get this error. Anyone has any idea why?
DataTables warning: table id=example - Ajax error. For more
information about this error, please see http://datatables.net/tn/7
The link:
http://cts360.ctscloudapp.com/simple.html
simple.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Basic initialisation</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/dataTables/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/dataTables/examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="/dataTables/examples/resources/demo.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/js/dataTables.editor.min.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/syntax/shCore.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/demo.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/editor-demo.js"> </script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "/queries/vendor.php",
table: "#example",
fields: [ {
label: "Company:",
name: "company"
}, {
label: "Brief Description:",
name: "briefDescription"
}, {
label: "Contact:",
name: "contact"
}, {
label: "Contact Title:",
name: "contactTitle"
}, {
label: "Work:",
name: "work"
}, {
label: "Mobile:",
name: "mobile"
}, {
label: "Email:",
name: "email"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "/queries/vendor.php",
columns: [
{ data: "company" },
{ data: "briefDescription" },
{ data: "contact" },
{ data: "contactTitle" },
{ data: "work" },
{ data: "mobile" },
{ data: "email" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Company</th>
<th>Brief Description</th>
<th>Contact</th>
<th>Contact Title</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
</tr>
</thead>
</table>
</div>
</section>
</body>
</html>
vendor.php
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../dataTables/php/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'vendors' )
->fields(
Field::inst( 'company' ),
Field::inst( 'briefDescription' ),
Field::inst( 'contact' ),
Field::inst( 'contactTitle' ),
Field::inst( 'work' ),
Field::inst( 'mobile' ),
Field::inst( 'email' )
)
)
->process( $_POST )
->json();
Related
I have this
table.php
<?php
$connect = mysqli_connect("dbexample.com", "dboexample", "password", "dbexample");
$query ="SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
setInterval(function () {
table.fnReloadAjax();
}, 3000);
</script>
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Description</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row['shipping_date_c'].'</td>
<td>'.$row['shipping_time_c'].'</td>
<td>'.$row["billing_address_postalcode"].'</td>
<td>'.$row["billing_address_city"].'</td>
<td>'.$row["billing_address_country"].'</td>
<td>'.$row['arrival_date_c'].'</td>
<td>'.$row['arrival_time_c'].'</td>
<td>'.$row["shipping_address_postalcode"].'</td>
<td>'.$row["shipping_address_city"].'</td>
<td>'.$row["shipping_address_country"].'</td>
<td>'.$row["description"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
I create an index.php file with this code:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php'); // table.php is where I have my table
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
It is working, I got the autrefresh of my data on the table but I have every 3 seconds this css problem:
This is how it looks as usual
This is how it looks after 3 seconds
I put the css links into the index.php file I mentioned before but I still have the same css problems:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php');
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
I got it working...
In your table.php (you have to use PDO instead of MySQLi):
<?php
$pdo = new PDO("mysql:dbname=dbexample;host=dbexample.com;port=3306", "dboexample", "password");
$query = $pdo->prepare("SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC");
$query->execute();
echo json_encode($query->fetchAll());
?>
In your index.php:
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered"></table>
</div>
</div>
<script>
$(document).ready(function() {
var table;
$.post('table.php', {}, function(data) {
if(data) {
console.log(data);
table = $('#employee_data').DataTable({
data: data,
columns: [
{'data': 'shipping_date_c', 'title': 'Date'}
,{'data': 'shipping_time_c', 'title': 'Time'}
,{'data': 'billing_address_postalcode', 'title': 'Zip'}
,{'data': 'billing_address_city', 'title': 'City'}
,{'data': 'billing_address_country', 'title': 'Country'}
,{'data': 'arrival_date_c', 'title': 'Date'}
,{'data': 'arrival_time_c', 'title': 'Time'}
,{'data': 'shipping_address_postalcode', 'title': 'Zip'}
,{'data': 'shipping_address_city', 'title': 'City'}
,{'data': 'shipping_address_country', 'title': 'Country'}
,{'data': 'description', 'title': 'Description'}
]
});
}
}, 'json');
setInterval(function () {
table.clear().draw();
$.post('table.php', {}, function(data) {
table.rows.add(data).draw();
}, 'json');
}, 3000);
});
</script>
</body>
</html>
I'm looking to add hyperlinks to the table I have. I'm using DataTables Editor and at this point I'm just adding tags in order to add the links to the url's. This requires me to parse through thousands of URL's and add the url tags. Any way for me to apply this to particular attributes in the table?
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</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- "//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.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/table.Brown_AP.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<!--FancyBox-->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
</head>
<body>
<div class="container-fluid">
<h1>
<center>
AP
</center>
</h1>
<table cellspacing="0" class="display responsive nowrap" id="Brown_AP" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>AP</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Above is the HTML the following is the PHP. How would I go about adding hyperlinks into the attributes pulled from the MYSQL.
<?php
/*
* Editor server script for DB table AP
* Automatically generated by http://editor.datatables.net/generator
*/
// DataTables PHP library
include( "lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Validate;
// Build our Edit instance and process the data coming from _POST
Editor::inst( $db, 'APS', 'Assoicated_Floor_Plans' )
->fields(
Field::inst( 'Building' ),
Field::inst( 'Floor' ),
Field::inst( 'Number_Of_AP' ),
Field::inst( 'Associated_Floor_Plans' ),
Field::inst( 'AP' ),
Field::inst( 'Status' )
)
->process( $_POST )
->json();
I am using codeigniter. When I call an ajax request to the page by giving the full path to file, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
<link rel="stylesheet" href="http://localhost/jqwidgets-ver3.2.1/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ShipName', type: 'string'},
{ name: 'ShipAddress', type: 'string' },
{ name: 'ShipCity', type: 'string' },
{ name: 'ShipCountry', type: 'string' }
],
cache: false,
url: 'http://localhost/CodeIgniter_2.1.4/index.php/blog/controllerfunction',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
width: "100%",
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Ship Name', datafield: 'ShipName'},
{ text: 'Address', datafield: 'ShipAddress'},
{ text: 'City', datafield: 'ShipCity'},
{ text: 'Country', datafield: 'ShipCountry'}
]
});
});
</script>
</head>
<body class='default'>
<h1>Shipment Records</h1>
<div style="width: 1000px" id="jqxgrid"></div>
</body>
</html>
works fine with
url: 'http://localhost/CodeIgniter_2.1.4/application/view/serverfiltering_paging_and_sorting_data.php',
but
url: 'http://server/CodeIgniter_2.1.4/index.php/controllername/controlerfunction',
shows an error : SyntaxError: JSON.parse: unexpected character
I did not make any other change in the code.
I use the code below to get data from a database. No issues here.....
$query = "SELECT * FROM takenlijst";
$from = 0;
$to = 999;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$taken[] = array(
'taaknummer' => $row['taaknummer'],
'naam' => $row['naam'],
'taak' => $row['taak'],
'prioriteit' => $row['prioriteit'],
'datum' => $row['datum']
);
}
echo json_encode($taken);
However, when i use the code below i get no data. What am i doing wrong?
<html lang="en">
<head>
<link rel="stylesheet" href="../../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jquery/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jquery/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'taaknummer', type: 'string'},
{ name: 'naam', type: 'string'},
{ name: 'taak', type: 'string'},
{ name: 'prioriteit', type: 'string'},
{ name: 'datum', type: 'string'}
],
url: 'http://www.site.com/management/takenlijstdata.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'Taaknummer', datafield: 'taaknummer', width: 250},
{ text: 'Naam', datafield: 'naam', width: 150 },
{ text: 'Taak', datafield: 'taak', width: 180 },
{ text: 'Prioriteit', datafield: 'prioriteit', width: 200 },
{ text: 'Datum', datafield: 'datum', width: 120 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
The echo displays the data correctly. Even when i output the data to a txt file it can be read but not when i try to read it from this code.
I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row[Cell1];
$responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
$i++;
}
echo $json_encode($responce);
And my json file comes out like this:
{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}
And finally my HTML looks like this:
<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#list").jqGrid({
url: "retrieve.php",
datatype: "json",
mtype: "POST",
colNames: ["Cell1", "Cell2", "Cell3"],
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
jsonReader: { repeatitems: false },
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
scroll:1,
sortname: Cell1",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
ignoreCase:true,
autowidth:true,
ondblClickRow: function (id) {
$(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
}
});
});
</script>
If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!
The main errors in your code are the following:
you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.
May be your JS file are conflicted.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
You should be use only one JS instead use of both jquery file.
and Change sequence of js file like this way..
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
Please remove "," from colModel
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
to
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' }
],
I think it solve your all problem.