问题
I have 1000+ data and I need to place it in a ngTable but instead of 1 column I need to split this data into multiple columns, say 2, with filters and pagination after 20 items. Is it possible with ngTable?
For example: I have 100 items. On 1st page I will have 1st 20 items on 1st column and 2nd 20 items in 2nd column.
Below is my template
<div class="col-md-12">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="namingConventionSearchText" />
</div>
</form>
</div>
<table class="table" ng-table="namingConventionParams">
<tr ng-repeat="item in items.instanceData | filter:namingConventionSearchText">
<td style="word-break:break-all">{{item}}</td>
</tr>
</table>
Controller code
$scope.items = {
"title": "Task",
"instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail"]
};
$scope.namingConventionParams = new ngTableParams({
page: 1, // show first page
count: 10
}, {
defaultSort: "asc",
total: $scope.items.instanceData.length, // length of data
counts: [],
getData: function($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, params.orderBy()) : $scope.items.instanceData;
orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
$scope.task_data = orderedData;
$scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.task_data);
}
});
Update
Here is my plunker link.
回答1:
First of all I would try to map my string array to an object array before binding to the ngTable That would feel more natural to the ngTable. Something like this ["string A", "string B"] would map to [ { index: '0', text: 'string A'}, { index: '1', text: 'string B'}];.
This is what I came up with in terms of a single string array split equally into two columns per page. Take note to the custom range filter I used:
var app = angular.module('main', ['ngTable'])
.filter('slice', function() {
return function(items, page, size) {
return items.slice((page - 1) * size, page * size);
}
})
.filter('range', function() {
return function(start, length) {
var range = [];
for(var i = start; i < start + length; i++) {
range.push(i);
}
return range;
}
})
.controller('DemoCtrl', function($scope, $filter, ngTableParams, $log) {
$scope.items = {
"title": "Task",
"tableHeader": "Items",
"instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail", "CyclePlan Detail UPD", "CyclePlan TG", "CyclePlan UPD", "DELETE_ACCOUNT_FILT_NUCLEUS", "DELETE_LOV_REPOSITORY", "DELETE_TIME_OFF_TERITTORY", "DEL_EVNT_ATND", "DUMMIES", "Filewatcher Test", "MOD ACCT TERR LOADER DELTA ORM", "MOD ACCT TERR LOADER DELTA ORM W2", "MOD ACCT TERR LODER CP NORM ORM", "MOD ACCT TERR LODER CP NORM ORM W2", "MOD ACCT TERRITORY LOADER NORM ORM", "MOD ACCT TERRITORY LOADER NORM ORM W2", "MOD ATL NULL UPDATE_ORM", "MOD ATL NULL UPDATE_ORM_W2", "MOD Account Terty Loader Sync_ORM", "MOD Account Terty Loader Sync_ORM_W2", "MOD BRICK TO TERR DATA CLEAN ORM", "MOD BRICK TO TERR DATA CLEAN ORM W2", "MOD TA ACCT TERR LOADER COMB ORM", "MOD TA ACCT TERR LOADER COMB ORM W2", "MOD TA CALLING SP SYNC ORM", "MOD TA CALLING SP SYNC ORM W2", "MOD TA COUNTRY EU ORM", "MOD TA COUNTRY EU ORM_W2", "MOD TA CYCLE PLAN POWER CENTER ORM", "MOD TA CYCLE PLAN POWER CENTER ORM W2", "MOD TA RULE DELIMIT ORM", "MOD TA RULE DELIMIT ORM W2", "MOD TA RULE SPLIT SYNC ORM", "MOD TA RULE SPLIT SYNC ORM W2", "MOD TA USER NOTIFICATION_ORM", "MOD TA USER NOTIFICATION_ORM_W2", "MOD_CEG_ACCNTRELATIONS_INBOUND", "MOD_CEG_ACCNTRELATIONS_INBOUND_2", "MOD_CEG_ADDR_DEL", "MOD_CEG_AFFILIATIONS_INBOUND", "MOD_CEG_CHILD_ACNT_DEL", "MOD_CEG_Child_Account_PRIM_UNCHECK", "MOD_CEG_Codes_INBOUND", "MOD_CEG_INDIVIDUALADDR_INBOUND", "MOD_CEG_INDIVIDUAL_INBOUND", "MOD_CEG_Interest_Inbound", "MOD_CEG_Organisation_INBOUND", "MOD_CEG_Organisation_NAME_UPD", "MOD_CEG_REPL_ACCOUNT", "MOD_CEG_REPL_ACCOUNT_2", "MOD_CEG_REPL_ACCOUNT_GROUP", "MOD_CEG_REPL_ACCOUNT_PLAN_ACCOUNT_GROUP", "MOD_CEG_REPL_ADDRESS", "MOD_CEG_REPL_CALL2_VOD", "MOD_CEG_REPL_CHILD_ACCOUNT", "MOD_CEG_REPL_LOV", "MOD_CEG_REPL_Medical_EVENT_VOD", "MOD_CEG_REPL_QUESTION", "MOD_CEG_REPL_QUESTION_RESPONSE", "MOD_CEG_REPL_RECORDTYPE", "MOD_CEG_REPL_SHR_MEETING_COST", "MOD_CEG_REPL_SURVEY", "MOD_CEG_REPL_SURVEY_QUESTION", "MOD_CEG_REPL_SURVEY_TARGET", "MOD_CEG_Roles_INBOUND", "MOD_CEG_Speciality_Inbound", "MOD_CEG_Title_INBOUND", "MOD_CEG_VAL_REQ_REPL", "MOD_CEG_WORKPLACEADDR_INBOUND", "MOD_CYCLE_PLAN_TARGETS", "MOD_INDI_ADDRESS_DELETE", "MOD_IND_ADDRESS", "MOD_IND_ADDR_UPD", "MOD_INT_ORM_SYNC_TRACKING", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY_W2", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY_W2", "MOD_INT_ORM_REPL_SFDC_DM", "MOD_INT_ORM_SYNC_DM_CALL", "MOD_INT_ORM_SYNC_DM_CALL_DETAIL", "MOD_INT_ORM_SYNC_DM_CALL_KEY_MESSAGE", "MOD_INT_ORM_SYNC_DM_CALL_SAMPLES", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_DETAIL", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_TARGET", "MOD_INT_REPL_INTERFACE", "MOD_INT_REPL_INTERFACE_OBJ_DLY_BKP1", "MOD_INT_REPL_INTERFACE_OBJ_DLY_Dummy", "MOD_INT_REPL_INTERFACE_OBJ_DLY_TEST1", "MOD_INT_REPL_USER", "MOD_INT_SYNC_CALLS", "MOD_INT_SYNC_CALLS_SAMPLE", "MOD_INT_SYNC_CALLS_STATUS_UPD", "MOD_MIG_REPL_Account", "MOD_MIG_REPL_Account_2", "MOD_MIG_REPL_Questions", "MOD_MIG_REPL_Survey_Questuions", "MOD_MIG_REPL_Survey_Targets", "MOD_MIG_REPL_Surveys", "MOD_MIG_SYNC_CONSENT", "MOD_MIG_SYNC_QUESTION", "MOD_MIG_SYNC_QUESTION_RESP", "MOD_MIG_SYNC_SURVEY", "MOD_MIG_SYNC_SURVEY_QUESTIONS", "MOD_MIG_SYNC_SURVEY_TARGET", "MOD_MIG_SYNC_User", "MOD_SYNC_BALA_ACCOUNT2", "MOD_TA_ERROR_LOGIC ORM", "MOD_TA_ERROR_LOGIC ORM W2", "MOD_BALA", "MOD_BALA_2", "MOD_BALA_ACCOUNT", "MOD_BALA_CYCLE_PLAN", "MOD_BALA_OUTFILE", "MOD_BALA_OUTFILE_2", "SHANKAR", "SHANKAR_ALL_COLS", "SHANKAR_MIGRATE_TEST", "SHANKAR_SYNC_TEST", "JP_CLEANUP_ACCOUNT_CYCLE1_SYNC", "JP_CLEANUP_ADDRESS_CYCLE1_SYNC", "JP_CLEANUP_CALL2_CYCLE1_SYNC", "JP_CLEANUP_CHILD_CYCLE1_SYNC", "JP_CLEANUP_CYCLE1_REPL", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC_2", "Login", "Logon_REST", "Migration_Test", "New", "OUS_ATHENS_REPL", "PC_STG_ADDRESS_to_ODS_ADDRESS_Test", "PC_US_FFtoSTG_CM_Dedupe_Xref", "PC_US_FFtoSTG_MDS_Territory_Alignment", "PC_US_IBtoIB_CM_Cust_Xref_MIX", "PC_US_IBtoOB_ATL_MigData", "PC_US_IBtoOB_ATL_RawData", "PC_US_IBtoOB_CyclePlan_Ups", "PC_US_IBtoOB_CyclePlnDtl_Ups", "PC_US_IBtoOB_CyclePlnTgt_Ups", "PC_US_IBtoOB_TSF_Upsert", "PC_US_MDS_FFtoSTG_Call_Guidance ", "PC_US_MDS_FFtoSTG_Call_Guidance_ADHD", "PC_US_MDS_FFtoSTG_Call_Guidance_GI", "PC_US_REPLtoSTG_Terr_Temp", "PC_US_RepltoOB_CyclePln_GetID", "Pattern_test", "REPL_SPL_REC_ACCNTTYPE", "Repl_BAV_mig1todev", "SPL_CHR_FF2STG", "SPL_CHR_REPL2FF", "SPL_CHR_STG2ODS", "Shyam_test", "Test Job", "Test Repl", "Test_1", "Test_account_replciation", "ENG_Attachment", "ENG_Attachment_Oracle_to_Oracle", "ENG_Attachment_REPL_CLOBtoBlob", "ENG_CONV_Account_ISDELETED_UPD", "ENG_CONV_Account_ISDELETED_UPD_2", "ENG_CONV_Attachment_ISDELETED_UPD", "ENG_CONV_Contact_ISDELETED_UPD", "ENG_CONV_IW_CONSENT_UPD", "ENG_CONV_Infusion_training_ISDELETED_UPD", "ENG_CONV_PATIENT_ADDRESS_TO_SFDC_ADDRESS", "ENG_CONV_PATIENT_CASE_UPDATE", "ENG_CONV_PATIENT_CONTACT_TO_SFDC_CONTACT", "ENG_CONV_PATIENT_CONTACT_UPDATE", "ENG_CONV_PATIENT_TO_SFDC_CONTACT_2", "ENG_CONV_TO_SFDC_ACCOUNT", "ENG_CONV_Task_ISDELETED_UPD", "ENG_CONV_US_PM_Address_ISDELETED_UPD", "ENG_CONV_US_PM_Case_DMODosition_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Caregiver_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Case_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Consent_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Physician_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_Shipment_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Site_Of_Care_ISDELETED_UPD", "ENG_CONV_US_PM_Service_Request_ISDELETED_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PHYSICIAN_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_UPSERT", "ENG_CONV_Z_SFDC_ADDRESS_TO_SFDC_US_PM_ADDRESS_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_64KB", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_Test", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_UPD_PRODUCT", "ENG_CONV_Z_SFDC_INFUSION_TRAINING_TO_SFDC_INFUSION_TRAINING_INSERT", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_CONSENT_TO_SFDC_US_PM_Patient_Consent__c_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH50", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_old", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_2", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_3", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_4", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_UPSERT", "ENG_CONV_Z_SFDC_TASK_CYCLE_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT_SQ", "ENG_CONV_Z_SFDC_US_PM_CASE_DMODOSITION_TO_SFDC_CASE_DMODOSITION_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_UPSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_UPD", "ENG_CONV_Z_SFDC_US_PM_SERVICE_REQUEST_TO_SFDC_SERVICE_REQUEST_INSERT ", "ENG_MDM_IB_ACCOUNT_INS", "ENG_MDM_IB_ACCOUNT_UPD", "ENG_MDM_IB_ADDITIONAL_SOC_INS", "ENG_MDM_IB_CONTACT_INS", "ENG_MDM_IB_CONTACT_UPD", "ENG_MDM_IB_DUMMY_ACCOUNT_INS", "ENG_MDM_IB_IDENTIFIER_ACCOUNT_UPD", "ENG_MDM_IB_IDENTIFIER_CONTACT_UPD", "ENG_MDM_OB_DATA_STD_LASTNAME", "ENG_MDM_OB_DATA_STD_SPECIALTY", "ENG_MDM_OB_DATA_STD_SUFFIX", "ENG_SFDCINT_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_CONTACT_TO_CNTRL_SFDC_CONTACT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACTION_ITEM", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Partner", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Share", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Attendee", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Site_of_Care", "ENG_SFDC_TO_ODS_SFDC_REPL_Address", "ENG_SFDC_TO_ODS_SFDC_REPL_Admin_Country_Region", "ENG_SFDC_TO_ODS_SFDC_REPL_Asset", "ENG_SFDC_TO_ODS_SFDC_REPL_Attachment", "ENG_SFDC_TO_ODS_SFDC_REPL_Awards_and_Honors", "ENG_SFDC_TO_ODS_SFDC_REPL_Books_and_Monographs", "ENG_SFDC_TO_ODS_SFDC_REPL_CONCEPT_BRIEF", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Case", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Comment", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Contact_Role", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_DMODosition", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Solution", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Clinical_Trials", "ENG_SFDC_TO_ODS_SFDC_REPL_Committees", "ENG_SFDC_TO_ODS_SFDC_REPL_Competitor", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_1", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_2", "ENG_SFDC_TO_ODS_SFDC_REPL_Contract", "ENG_SFDC_TO_ODS_SFDC_REPL_Country", "ENG_SFDC_TO_ODS_SFDC_REPL_Customer_Business_Plan", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD_COMPONENT", "ENG_SFDC_TO_ODS_SFDC_REPL_De-Identified_Patient", "ENG_SFDC_TO_ODS_SFDC_REPL_Dropped_Item", "ENG_SFDC_TO_ODS_SFDC_REPL_Editorial_Boards", "ENG_SFDC_TO_ODS_SFDC_REPL_Educational_Activity", "ENG_SFDC_TO_ODS_SFDC_REPL_Event"],
groups: 2
};
$scope.tableFilter = {};
$scope.namingConventionParams = new ngTableParams({
page: 1, // show first page
count: 20,
filer: $scope.tableFilter
}, {
defaultSort: "asc",
total: $scope.items.instanceData.length, // length of data
counts: [],
getData: function($defer, params) {
var reverceOrder = params.orderBy() && params.orderBy().length > 0 && params.orderBy()[0].indexOf('-') > -1;
var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, 'valueOf()', reverceOrder) : $scope.items.instanceData;
orderedData = $scope.tableFilter ? $filter('filter')(orderedData, $scope.tableFilter.text) : orderedData;
$scope.task_data = orderedData;
$scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.task_data);
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="DemoCtrl">
<h1>{{items.title}}</h1>
<div class="col-md-12">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="tableFilter['text']" />
</div>
</form>
</div>
<table class="table" ng-table="namingConventionParams">
<tbody>
<tr ng-repeat="rowIndex in 0 | range : $data.length / 2" ng-init="rangeSize = $data.length / 2">
<td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex]}}</td>
<td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex + rangeSize]}}</td>
</tr>
</tbody>
<div>回答2:
The above code works great.. However there is a problem with search. For me the search was not working if im on anypage other than first page. I added a watch for the filter and reloaded the table.
$scope.$watch("tableFilter.text", function (newValue, oldValue) {
$scope.namingConventionParams.reload();
$scope.namingConventionParams.$params.page = 1;
});
来源：https://stackoverflow.com/questions/27545505/how-to-split-data-into-multiple-columns-of-ngtable