survey/app/views/admin/surveys/pagination_setting.erb

<% if @survey_sections_len>0 %>
<%= javascript_include_tag "lib/jquery.tmpl.min.js" %>
<%=  form_for @survey, :url => {:action => "save_pagination_setting"}, :html => {:class => "form-horizontal main-forms", :id => 'pagination_form',data: {"min-section" => @min_section,"max-section" => @max_section}} do |f| %>
<fieldset>
	<table class="table" id="survey_pagination_table">
		<thead>
			<th><%= t('survey.pagination') %></th>
			<th><%= t('survey.start_section') %></th>
			<th><%= t('survey.end_section') %></th>
			<th></th>
		</thead>
		<tbody>
		</tbody>
	</table>
	<script id="pagination_form_template" type="text/x-custom-template">
		<tr class="${_type}">
			<td>
				{{if _id}}
				<%= hidden_field_tag "${_name}[${_i}][_destroy]", "${_destroy}", class: 'should_destroy', id: "${_id_prefix}destroy" %>
				<%= hidden_field_tag "${_name}[${_i}][_id]", "${_id}", class: 'id', id: "${_id_prefix}id" %>
				{{/if}}
				<%= hidden_field_tag "${_name}[${_i}][index]", "${_index}", class: "index", id: "${_id_prefix}index" %>
				<%= label_tag nil,"${_index}", class: 'index', id: nil %>
			</td>
			<td>
				<select id="${_id_prefix}start_section" name="${_name}[${_i}][start_section]" class="start_section">
					<% (@min_section..@max_section).each do |index| %>
						<option value="<%= index %>" {{if _start_section == "<%= index %>"}}selected="selected"{{/if}}>
							<%= index %>
						</option>
					<% end %>
				</select>
			</td>
			<td>
				<select id="${_id_prefix}end_section" name="${_name}[${_i}][end_section]" class="end_section">
					<% (@min_section..@max_section).each do |index| %>
						<option value="<%= index %>" {{if _end_section == "<%= index %>"}}selected="selected"{{/if}}>
							<%= index %>
						</option>
					<% end %>
				</select>
			</td>
			<td><%= f.button t('delete_'), type: 'button', class: 'btn btn-danger remove-btn' %></td>
		</tr>
	</script>
	<script type="text/javascript">
		function setData(d,i){
			if (d==null){
				var _destroy = '0',
						_i = $('#survey_pagination_table tbody>tr').length,
						_index = _i+1,
						_start_section = null,
						_end_section = null,
						_id = null,
						_type = 'new'
			}else{
				var _destroy = '0',
						_i = i
						_index = d.index,
						_start_section = d.start_section,
						_end_section = d.end_section,
						_id = d._id,
						_type = 'old'
			}
			var data = {
				_id_prefix: "survey_survey_paginations_"+_i+'_',
				_name: "survey[survey_paginations]",
				_destroy: _destroy,
				_i: _i,
				_index: _index,
				_start_section: _start_section,
				_end_section: _end_section,
				_id: _id,
				_type: _type	
			}
			return data
		}
		function  check_max_sections(value) {
			var max_section = $('#pagination_form').data('max-section')
			var flag = value ? value != max_section : value==$('.end_section').length==0 || $('.end_section').eq(-1).val()!=max_section
			if (!flag){
				$('.add-pagination').hide()
			}else{
				$('.add-pagination').show()
			}
			return flag;
		}
		function disable_first_start_section() {
			if ($('.start_section:visible').length==1){
					$('.start_section:visible').eq(0).attr('disabled','')
				}
		}
		function check_section_num(){
			var start_section_val = parseInt($('#pagination_form tbody .end_section').eq(0).val()) + 1,
					delete_index = 1,
					max_section = parseInt($('#pagination_form').data('max-section'))
			$('#pagination_form tbody').find('tr:visible:not(:first-child)').each(function(){
				if (max_section<start_section_val){
					return false;
				}
				$(this).find('.start_section').val(start_section_val)
				var end_section = $(this).find('.end_section'),
						val = parseInt(end_section.val())
				if (val<start_section_val){
					end_section.val(start_section_val)
				}
				start_section_val++;
				delete_index++;
			})
			check_max_sections(start_section_val-1)
			var list = $('#pagination_form tbody').find('tr:visible')
			for (var i=delete_index;i<list.length;i++){
				list.eq(i).find('.remove-btn').click()
			}
		}

		$(function() {
			var pagination_settings = <%= @pagination_settings.to_json.html_safe %>;
			$.each(pagination_settings,function(i,v){
				var html = $('#pagination_form_template').tmpl(setData(v,i))
				$('#pagination_form tbody').append(html)
			})
			$('#survey_pagination_table tbody')
			$('.add-pagination').click(function(){
				if (check_max_sections()){
					var html = $('#pagination_form_template').tmpl(setData())
					$('#pagination_form tbody').append(html)
					disable_first_start_section()
					check_section_num()
				}
			})
			$('#pagination_form').on(clickEvent, '.remove-btn', function(event) {
				var parent = $(this).parents('tr')
				if (parent.hasClass('new')){
					parent.remove()
				}else{
					parent.find('should_destroy').val('1')
					parent.hide()
				}
				disable_first_start_section()
				$('label.index:visible').each(function(i,v){
					$(this).text(i+1)
					$(this).parents('tr').find('input.index').val(i+1)
				})
				check_max_sections()
			})
			check_max_sections()
		})
		$('#pagination_form').on('change', '.end_section', function(event) {
			var end_section_val = $(this).val(),
					start_section_val = $(this).parents('tr').find('.start_section').val()
			if (end_section_val<start_section_val){
				end_section_val = start_section_val
				$(this).val(end_section_val)
			}
			check_section_num()
		})
		$('#pagination_form').on('change', '.start_section', function(event) {
			var start_section_val = $(this).val(),
					end_section_val = $(this).parents('tr').find('.end_section').val()
			if (end_section_val<start_section_val){
				start_section_val = end_section_val
				$(this).val(start_section_val)
			}
			check_section_num()
		})

	</script>
	<%= f.button t('survey.add_pagination'),type: 'button',class: 'btn btn-success add-pagination' %>
	<%= f.submit t('submit'), class: 'btn btn-primary' %>
</fieldset>
<% end %>
<% else %>
	<h1>
		<%= t('survey.no_section_hint')  %>
	</h1>
<% end %>