Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2017, 11:15
Интересующийся
Отправить личное сообщение для kuliev Посмотреть профиль Найти все сообщения от kuliev
 
Регистрация: 14.10.2016
Сообщений: 10

Jquery плагин DataTable отправка POST AJAX
Доброго времени суток.

Использую плагин DataTable для вывода списка студентов.
Как видно из первого скрина выводятся данные в модальное окно, на против каждого студента имеется чекбокс, так вот если я выбираю на первой странице 3х студентов за тем перехожу на вторую и выбираю там 3х студентов то при субмите приходят данные с того листа на котором нажал кнопку добавить. А с первого листа ничего не приходит. Как реализовать чтобы можно было отмечать студентов по разным листам и чтобы они добавлялись в POST запрос. Спасибо.
Изображения:
Тип файла: jpg 1.jpg (113.3 Кб, 6 просмотров)
Тип файла: jpg 2.jpg (126.6 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2017, 11:37
Новичок на форуме
Отправить личное сообщение для giratek Посмотреть профиль Найти все сообщения от giratek
 
Регистрация: 22.01.2017
Сообщений: 1

Накапливать данные о студентах, выбранных на предыдущих страницах в js, а потом отправлять их одним махом на последней
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2017, 11:52
Интересующийся
Отправить личное сообщение для kuliev Посмотреть профиль Найти все сообщения от kuliev
 
Регистрация: 14.10.2016
Сообщений: 10

Сообщение от giratek Посмотреть сообщение
Накапливать данные о студентах, выбранных на предыдущих страницах в js, а потом отправлять их одним махом на последней
Если не затруднит, набросай пример.
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2017, 12:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от kuliev
набросай пример.
а ваш пример где? какой сейчас код?
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2017, 12:22
Интересующийся
Отправить личное сообщение для kuliev Посмотреть профиль Найти все сообщения от kuliev
 
Регистрация: 14.10.2016
Сообщений: 10

Сообщение от рони Посмотреть сообщение
а ваш пример где? какой сейчас код?
Хвастать особо не чем, пока банальный код отправки формы с помощью AJAX. Сейчас гуглю как собрать массив отмеченных чекбоксов.

/*** ДОБАВЛЯЕМ СЛУШАТЕЛЯ В ГРУППУ ***/
	//Ajax add std grp
	$('#formAddStdGrp').submit(function(e){
		e.preventDefault();
		var form = $('#formAddStdGrp');
		$.ajax({
			type: form.attr('method'),
			url: form.attr('action'),
			data: form.serialize(),
			dataType: "json",
			success: function(data){
				$('.resp').html('<div class="alert alert-success"><p>'+ data.ok +'</p></div>')
				setTimeout(function(){
					$(location).href('http://site/?mode=45&idGroup='+data.id);
				}, 1500);
			}
		})
		
	});
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2017, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от kuliev
Сейчас гуглю как собрать массив отмеченных чекбоксов.
строка 9
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2017, 12:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от kuliev
$(location).href
где можно посмотреть документацию на $.href ?
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2017, 12:36
Интересующийся
Отправить личное сообщение для kuliev Посмотреть профиль Найти все сообщения от kuliev
 
Регистрация: 14.10.2016
Сообщений: 10

Сообщение от рони Посмотреть сообщение
строка 9
Что строка 9? На ней сереализуются данные для отправки полученые с формы. При пагинации таблицы данные DOM "теряются" и форма видит только те поля которые отображены в данный момент и при сабмите отправляет все с того листа где нахожусь.

Решением является сборка отмеченных чекбоксов на стороне клиента использую JS.

Вот что нашел, сейчас буду прикручивать!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Select Multiple Rows With Checkboxes</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/dataTables.bootstrap.min.css" rel="stylesheet"/>
    <link href="css/dataTables.checkboxes.css" rel="stylesheet"/>
</head>
<body>
    
    <div class="container" style="margin:15px auto">
        <form id="myform" method="post">
            <p><b>Selected rows data</b></p>
            <pre id="view-rows"></pre>
            <p><b>Form data as submitted to the server</b></p>
            <pre id="view-form"></pre>
            <p><button class="btn btn-danger">View Selected</button><br/></p>
            <table id="mytable" class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>    
                        <th></th>  
                        <th>Name</th>  
                        <th>Position</th>  
                        <th>Office</th>  
                        <th>Extn.</th>  
                        <th>Start date</th>  
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>    
                        <th></th>  
                        <th>Name</th>  
                        <th>Position</th>  
                        <th>Office</th>  
                        <th>Extn.</th>  
                        <th>Start date</th>  
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.min.js"></script>
    <script src="js/dataTables.checkboxes.min.js"></script>
    <script>
    $(document).ready(function(){
        var mytable = $("#mytable").DataTable({
            ajax: 'data.json',
            columnDefs: [
                {
                    targets: 0,
                    checkboxes: {
                        seletRow: true
                    }
                }
            ],
            select:{
                style: 'multi'
            },
            order: [[1, 'asc']]
        })
        $("#myform").on('submit', function(e){
            var form = this
            var rowsel = mytable.column(0).checkboxes.selected();
            $.each(rowsel, function(index, rowId){
                $(form).append(
                    $('<input>').attr('type','hidden').attr('name','id[]').val(rowId)
                )
            })
            $("#view-rows").text(rowsel.join(","))
            $("#view-form").text($(form).serialize())
            $('input[name="id\[\]"]', form).remove()
            e.preventDefault()
        })
    })
    </script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2017, 13:41
Интересующийся
Отправить личное сообщение для kuliev Посмотреть профиль Найти все сообщения от kuliev
 
Регистрация: 14.10.2016
Сообщений: 10

Тему можно закрыть, проблема решена, кому интересно смотрите тут https://www.youtube.com/watch?v=k3cwPmdrkm4
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
конфликтуют плагин стилизации с ajax запросом prohor.zotikov jQuery 15 30.10.2013 19:57
Ajax. Отправка POST с bondary KARTOH AJAX и COMET 4 12.09.2012 10:15
форма в AJAX таблице и POST отправка switch001 jQuery 1 13.01.2012 08:37
Плагин jQuery form. Добавляю форму js'ом Physicist jQuery 3 21.07.2011 17:46
jQuery Ajax Rater Plugin и массив POST - Нужна помощь TROODON jQuery 12 30.12.2009 22:44