I have problem with jquery databale. I am getting error "Requested unknown parameter '1' for row 0". sorting also not done correctly. It is sorting based on the previous columns. below is my code.
here is my code.
<script>
var contactTable = j$('[id$="safetyContractTables"]').DataTable({
"bPaginate":true,
"bsort":true,
"bstateSave": true,
});
</script>
<apex:outputPanel id="safetyContractResult">
<apex:pageBlock id="safetyContractBlock" title="{!IF(isDraft, 'Draft View', IF(isPublished, 'Published View', ''))}" rendered="{!OR(selectedCategory=='Contract', selectedCategory=='Safety')}" >
<div display="layout" style="overflow: auto; height: 325px;" id="autowidth">
<table class="list" border="0" cellpadding="0" cellspacing="0" id="safetyContractTables">
<thead>
<tr class="headerRow">
<th>
<apex:inputCheckbox onclick="selectAllCheckboxes(this,'checkId');" rendered="{! checkAllEnabled}" id="selectAllCheckboxId" title="Check all to {! IF(isDraft, 'submit for QC', IF(isPublished, 'review', 'approve/reject'))}"/>
</th>
<th style="{!IF((isDraft || isPublished), '', 'display: none;')}">Action</th>
<th>Country</th>
<th>Status</th>
<th style="{!IF(isPublished || isApprovalView, '', 'display: none;')}">Version</th>
<apex:repeat value="{!definitions}" var="par">
<th>
<div class="requiredInput" >
<div class="requiredBlock" style="{!IF(par.CI_Is_Required__c, '', 'display: none;')}" />
{!par.CI_Intelligence_Label__c}
</div>
</th>
</apex:repeat>
<th style="{!IF(isApprovalView, '', 'display: none;')}">Submission comments</th>
<th style="{!IF(isPublished, '', 'display: none;')}">Last Reviewed date</th>
<th style="{!IF(isPublished, '', 'display: none;')}">Next Review date</th>
</tr>
</thead>
<tbody>
<tr class="odd" style="{!IF(safetyContractRows.size>0, 'display: none;', '')}">
<td valign="top" colspan="20" class="dataTables_empty" style="text-align: center;">There are no records to display</td>
</tr>
<apex:repeat value="{!safetyContractRows}" var="row">
<tr style="{!IF(row.collection.CF_Is_Removed__c, 'display: none;', '')}" class="dataRow {!IF(isApprovalView && MOD(row.rowIndex, 2) > 0, 'header', '')}" onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onmouseover="if (window.hiOn){hiOn(this);}" id="{!row.rowIndex}">
<td>
<apex:inputCheckbox value="{!row.isChecked}" onclick="checkRows('checkId');" id="checkId" rendered="{! row.collection.CF_Status__c == 'Draft' && isDraft || isApprovalView && row.collection.CF_Status__c != 'Published' || isPublished }" title="{! IF(isDraft && row.collection.CF_Status__c == 'Draft', 'Check to submit for QC', IF(isPublished, 'Check to review', IF(isApprovalView, 'Check to approve/reject', '')))}" />
</td>
<td style="{!IF(isDraft, '', 'display: none;')}">
<apex:commandlink rendered="{!NOT(row.isEdit)}" action="{!addRow}" reRender="msgId,safetyContractResult" >
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}" />
<apex:image url="{!URLFOR($Resource.Icons,'Icons/Add_Icon.png')}" width="15" height="15" title="Add new intelligence data"/>
</apex:commandLink>
<apex:commandlink rendered="{!AND(NOT(row.isEdit), OR(adminUser, row.collection.CF_Status__c == 'Draft'))}" action="{!removeRow}" reRender="msgId,safetyContractResult">
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}" />
<apex:image url="{!URLFOR($Resource.Icons,'Icons/Remove_Icon.png')}" width="15" height="15" title="Delete intelligence data. Click ‘Save All’ to save the delete" />
</apex:commandLink>
<apex:commandlink value="Save" rendered="{!row.isEdit}" action="{!saveMethod}" >
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}" />
</apex:commandLink>
<apex:outputText value=" | " rendered="{!row.isEdit}" />
<apex:commandlink value="Cancel" rendered="{!row.isEdit}" onclick="cancelMethod({!row.rowIndex}); return false;"
> <!--reRender="msgId,safetyContractResult"-->
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}" />
</apex:commandLink>
<apex:commandlink rendered="{!NOT(row.isEdit) && row.collection.CF_Status__c != 'Submitted for QC'}" action="{!editMethod}" >
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}" />
<apex:image value="/img/func_icons/util/pencil12.gif" title="Edit the intelligence data"/>
</apex:commandLink>
</td>
<td style="{!IF(isPublished,'','display: none;')}">
<apex:commandlink value="View History" action="{!collectionHistory}" reRender="historypopup">
<apex:param name="rowNumber" value="{!row.rowIndex}" assignTo="{!rowIndex}"/>
</apex:commandlink>
</td>
<td>
<apex:outputField id="outputFieldCountry" value="{!row.collection.CF_Country__c}" rendered="{!OR(NOT(row.isEdit), row.collection.Id != null)}" />
<div class="requiredInput" style="{!IF(AND(row.isEdit, row.collection.Id == null),'','display: none;')}">
<div class="requiredBlock"/>
<apex:selectList value="{!row.collection.CF_Country__c}" size="1" >
<apex:selectOptions value="{!sectionCountries}"/>
</apex:selectList>
</div>
</td>
<td>{!row.collection.CF_Status__c}</td>
<td style="{!IF(isPublished || isApprovalView, '', 'display: none;')}">
<apex:outputField id="outputFieldVersion" value="{!row.collection.CF_Version__c}" rendered="{!isPublished || isApprovalView}"/>
</td>
<apex:repeat value="{!row.intelligencesModel}" var="intell">
<td>
<!-- read mode -->
<apex:outputText id="outputTextDraftIntelligence" value="{!intell.intelligence.CI_Draft_Intelligence__c}" escape="false" rendered="{! row.collection.CF_Status__c != 'Published' && row.collection.CF_Status__c != 'Reviewed' && NOT(row.isEdit) && intell.definition.CI_Intelligence_DataType__c != 'Date'}"/>
<apex:outputText id="outputTextDateType" value="{0, date, dd'-'MMM'-'yy}" rendered="{! NOT(row.isEdit) && intell.definition.CI_Intelligence_DataType__c == 'Date'}">
<apex:param value="{!intell.dateType}" />
</apex:outputText>
<apex:outputText id="outputTextPublishedIntelligence" value="{!intell.intelligence.CI_Published_Intelligence__c}" escape="false" rendered="{! (row.collection.CF_Status__c == 'Published' || row.collection.CF_Status__c == 'Reviewed') && NOT(row.isEdit) && intell.definition.CI_Intelligence_DataType__c != 'Date'}"/>
<!-- Start edit mode -->
<div class="requiredInput">
<div class="requiredBlock" style="{!IF(intell.isRequired, '', 'display: none;')}"></div>
<!--Input Long Text Area (32000) DataType-->
<apex:inputTextarea id="inputTextAreaDraftLongText" value="{!intell.intelligence.CI_Draft_Intelligence__c}"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Long Text Area (32000)')}"/>
<!--Input Text (255) DataType-->
<apex:inputText id="inputTextDraftText" value="{!intell.intelligence.CI_Draft_Intelligence__c}"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Text (255)')}" />
<!--Input Number DataType-->
<apex:input id="inputDraftNumber" type="number" value="{!intell.numberType}"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Number')}" />
<!--Input Date DataType-->
<apex:input id="inputDraftDate" type="date" value="{!intell.dateType}" styleClass="dateInput dateOnlyInput" onfocus="DatePicker.pickDate(false, this , false);"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Date')}" />
<!--Input Rich Text Are DataType-->
<apex:inputTextarea id="inputTextAreaDraftRichText" richText="true" value="{!intell.intelligence.CI_Draft_Intelligence__c}"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Rich Text Area')}" />
<!--Input Single Select DataType-->
<apex:selectList value="{!intell.intelligence.CI_Draft_Intelligence__c}" size="1"
rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Single Select')}">
<apex:selectOptions value="{!paramIdToSelectionList[intell.intelligence.CI_Intelligence_Definiton_Name__c]}"/>
</apex:selectList>
<!--Input Single Select DataType-->
<apex:selectList value="{!intell.multiSelected}" rendered="{!AND(isDraft, row.isEdit, intell.definition.CI_Intelligence_DataType__c == 'Multi Select')}" multiselect="true" styleClass="SelAll">
<apex:selectOptions value="{!paramIdToSelectionList[intell.intelligence.CI_Intelligence_Definiton_Name__c]}"/>
</apex:selectList>
</div>
<script>
j$ = jQuery.noConflict();
j$('.SelAll').SumoSelect({ selectAll: true });
</script>
<!-- End edit mode -->
</td>
</apex:repeat>
<td style="{!IF(isApprovalView, '', 'display: none;')}">
<apex:outputField value="{!row.collection.CI_Submission_Comments__c}" rendered="{!isApprovalView && row.collection.CF_Status__c = 'Submitted for QC'}"/>
</td>
<td style="{!IF(isPublished, '', 'display: none;')}">
<apex:outputtext value="{0,date,dd-MMM-YYYY}" >
<apex:param value="{!row.collection.Last_Reviewed_date__c}"/>
</apex:outputtext>
</td>
<td style="{!IF(isPublished, '', 'display: none;')}">
<apex:outputText value="No Review Required For The Intelligence" rendered="{!null == row.nextReviewDate}" />
<apex:outputtext value="{0,date,dd-MMM-YYYY}" >
<apex:param value="{!row.nextReviewDate}"/>
</apex:outputtext>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
</apex:pageBlock>
</apex:outputPanel>
Best Answer
https://datatables.net/manual/tech-notes/4
If you look at you headers rendered attributes they do not match what you columns are so sometimes the headers and columns do not match.
i.e.
Your second column header:
and your column value
Notice how if the isPublished is true the Header does display yet the column will not
Repeat that analysis for the rest of your table. If a header appears a column has to also appear