Datatables : TypeError: dtSettings is undefined - php

Question

I have implemented data-tables fixed columns on project, the first (patients_report) data-tables report works very well but the second(visitation_report) one fails please advise how can I solve this problem ?
Below is my code :
<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link href='http://www.datatables.net/release-datatables/media/css/jquery.dataTables.css' rel='stylesheet'>
<link href='http://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css' rel='stylesheet'>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j(document).ready(function () {
var table = j('.patients_report').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
});
new j.fn.dataTable.FixedColumns(table, {
leftColumns: 0,
rightColumns: 1
});
fc.fnUpdate();
});
j(document).ready(function () {
var visitation_table = j('.visitation_report').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
});
new j.fn.dataTable.FixedColumns(visitation_table, {
leftColumns: 0,
rightColumns: 1
});
fc.fnUpdate();
});
j('.edit_patient_link').click(function () {
//get data
var patient_id = j(this).closest('tr').find('input[name="view_patient_id"]').val();
j.ajax({
type: "GET",
url: "<?php echo base_url(); ?>reports/get_patient_reports_details/" + patient_id,
dataType: "json",
success: function (response) {
j('#edit_patient_id').val(response[0].patient_id);
j('#edit_title').val(response[0].title);
j('#edit_phone_no').val(response[0].phone_no);
j('#edit_inputFirstName').val(response[0].f_name);
j('#edit_inputSurName').val(response[0].s_name);
j('#edit_inputOtherName').val(response[0].other_name);
j('#edit_dob').val(response[0].dob);
j('#edit_gender').val(response[0].gender);
j('#edit_maritalstatus').val(response[0].marital_status);
j('#edit_nationalid').val(response[0].identification_number);
j('#edit_email').val(response[0].email);
j('#edit_address').val(response[0].address);
j('#edit_residence').val(response[0].residence);
j('#edit_employement_status').val(response[0].employment_status);
j('#edit_employers_name').val(response[0].employer);
j('#edit_kinname').val(response[0].next_of_kin_fname);
j('#edit_kinsname').val(response[0].next_of_kin_lname);
j('#edit_kinrelation').val(response[0].next_of_kin_relation);
j('#edit_kinphone').val(response[0].next_of_kin_phone);
j('#edit_family_number').val(response[0].family_base_number);
},
error: function (data) {
}
});
});
j('.view_patient_link').click(function () {
//get data
var patient_id = j(this).closest('tr').find('input[name="view_patient_id"]').val();
j.ajax({
type: "GET",
url: "<?php echo base_url(); ?>reports/get_patient_reports_details/" + patient_id,
dataType: "json",
success: function (response) {
j('#view_patient_id').val(response[0].patient_id);
j('#view_title').val(response[0].title);
j('#view_phone_no').val(response[0].phone_no);
j('#view_inputFirstName').val(response[0].f_name);
j('#view_inputSurName').val(response[0].s_name);
j('#view_inputOtherName').val(response[0].other_name);
j('#view_dob').val(response[0].dob);
j('#view_gender').val(response[0].gender);
j('#view_maritalstatus').val(response[0].marital_status);
j('#view_nationalid').val(response[0].identification_number);
j('#view_email').val(response[0].email);
j('#view_residence').val(response[0].residence);
j('#view_employement_status').val(response[0].employment_status);
j('#view_employers_name').val(response[0].employer);
j('#view_kinname').val(response[0].next_of_kin_fname);
j('#view_kinsname').val(response[0].next_of_kin_lname);
j('#view_kinrelation').val(response[0].next_of_kin_relation);
j('#view_kinphone').val(response[0].next_of_kin_phone);
j('#view_family_number').val(response[0].family_base_number);
},
error: function (data) {
}
});
});
j('.delete_patient_link').click(function () {
//get data
var patient_id = j(this).closest('tr').find('input[name="view_patient_id"]').val();
j('.input_patient_id_delete').val(patient_id);
});
});
</script>
<style>
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
}
</style>

Answer 1

I can't see clearly what is the problem with your code. But I assume that is in first part, so put everything in single document ready event. Like this :
j(document).ready(function () {
var table = j('.patients_report').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
});
new j.fn.dataTable.FixedColumns(table, {
leftColumns: 0,
rightColumns: 1
});
table.fnUpdate();
var visitation_table = j('.visitation_report').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
});
new j.fn.dataTable.FixedColumns(visitation_table, {
leftColumns: 0,
rightColumns: 1
});
visitation_table.fnUpdate();
// rest of code
...
}); // close document ready event callback
There is fc.fnUpdate(); but I can't find fc variable nowhere. That should have been dataTable object. I hope this will do the trick. Good luck with project.