Base solution for your next web application
Open Closed

Sorting in jtable #3464


User avatar
0
huntethan89 created

Hi,

I used the sorting function in jtable. but when i sort the table on browser, it is not sorting according to selected Column. Following is my jtable code. Is there any other place where i need to initialize sorting ?

var _$FileTable = $('#FileTable');

_$FileTable.jtable({
			selecting: true,
			paging: true,
			pageSize: 50,
			sorting: true,
			multiSorting: true,
			actions: {
				listAction: {
					method: _fileService.getFiles
				}
			},

			fields: {
				id: {
					key: true,
					list: false
				},



				actions: {
					title: app.localize('Actions'),
					 width: '10%',
					sorting: false,
					display: function (data) {
						var $span = $('<span></span>');
						if (_permissions.open) {
							if (data.record.typeOfRealEstate == 0 || data.record.typeOfRealEstate == 1) {
								$('<a class="RealEstateImage" data-toggle="tooltip" data-placement="right" title="Open File" href="../Mpa/BuilderInformation/Index?jobid=' + data.record.id + '" ></a>')
									.appendTo($span)
									.click(function () {
										//$.ajax({
										//    url: abp.appPath + 'Mpa/FileTracking/DMS', data: { FileID: "hide"}
										//});
									});
							}
							else {
								$('<a class="UsedRealEstateImage" data-toggle="tooltip" data-placement="right" title="Open File" href="../Mpa/VendorInformation/Index?jobid=' + data.record.id + '" ></a>')
									.appendTo($span)
									.click(function () {
										//$.ajax({
										//    url: abp.appPath + 'Mpa/FileTracking/DMS', data: { FileID: "hide"}
										//});
									});
							}
						}
						if (_permissions.edit) {
							$('<button class="btn btn-icon btn-xs" data-toggle="tooltip" data-placement="top" title="Edit" ><i class="fa fa-edit"></i></button>')
								.appendTo($span)
								.click(function () {
									showhidedivs(0);
									_addNewFile.html('<i class="fa fa-save"></i> Update');
									updateFileid = data.record.id;
									getfileinfo(data.record.id);
								});
						}

						if (_permissions.delete) {
							$('<button class="btn btn-icon btn-xs" data-toggle="tooltip" data-placement="top" title="' + app.localize('Delete') + '"><i class="fa fa-trash-o"></i></button>')
								.appendTo($span)
								.click(function () {
									deleteUser(data.record);
								});
						}
						return $span;
					}
				},

				ComInfo1: {
					title: 'File Assigned To',
					display: function (data) {

						var getassitantuser = '';
						getassitantuser = $('#Users').find('option[id="' + data.record.assitantuserId1 + '"]').text();

						return getassitantuser;
					}
				},
				fileNumber: {
					title: app.localize('FileNumber')
				},
				re: {
					title: 'Re:'
				},
				client: {
					title: app.localize('Client')
				},
				civicAddress: {
					title: 'Civic Address',
					display: function (data) {

						var getaddredd = '';
						getaddredd = (data.record.civicAddress == null || data.record.civicAddress == '' ? "" : (data.record.civicAddress
							+ ",")) + (data.record.fileTrackingCity == null || data.record.fileTrackingCity == '' ? "" : (data.record.fileTrackingCity
								+ ",")) + (data.record.fileTrackingState == null || data.record.fileTrackingState == '' ? "" : (data.record.fileTrackingState
									+ ",")) + (data.record.fileTrackingZipCode == null || data.record.fileTrackingZipCode == '' ? "" : (data.record.fileTrackingZipCode
										+ ","));
						getaddredd = getaddredd.substring(0, getaddredd.length - 1);
						return getaddredd;
					}
				},
				creationTime: {
					title: app.localize('CreationTime'),
					display: function (data) {
						$(data.record).each(function () {
							if (newJobId < data.record.id) {
								newJobId = data.record.id;
							}

						});
						return moment(data.record.creationTime).format('L');
					}
				},
				closingDate: {
					title: 'Close Date',
					display: function (data) {
						if (data.record.closingDate == null)
							return '';
						return moment(data.record.closingDate).format('L');
					}
				},
				isGeneral: {
					title: '',
					width: '1%',
					display: function (data) {
						var $span = $('<span></span>');
						$('<div class="md-checkbox"><input id="' + data.record.id + '" class="md-check" type="checkbox" name="Print' + data.record.id + '" value="0"><label for="' + data.record.id + '"><span class="inc"></span><span class="check"></span><span class="box"></span></label></div>')
							//$('<input type="checkbox" value="0" name="finalUpdate' + data.record.id + '" />')
							.appendTo($span)
							.change(function () {
								
								GetCheckValues(data.record.id);
							});
						return $span;
					}
				}
			}
		});

3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Can you add "sorting: true" to any column you wanted to sort and see if it works ? Default value of sorting for columns is true.

    Also, which browser do you use ?

    Thanks.

  • User Avatar
    0
    huntethan89 created

    Hi,

    No, it didn't work, i am using google chrome.

    Thanks

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Does it make any request to server when you click sortable column headers ? If it makes any request, can you share your request information and server side code as well ?

    Thanks.