read a list of values from an input element and sent it to server

BTalayi

Hi,
I'm using data table editor with sql database and .net framework.
I need to send list of ids to server and load related rows on my data table. my code reads from an input text and a button send my request to server.
My code works and table shows related rows. but after a second table is refreshed and shows all rows again.
In the code, I mapped columns data to my sql columns. I'm not sure which part of code is refreshing data table.
I need to show an empty data table first and then fill it with rows I received from the server.
That would be great if you help me to fix it.

Thanks,

Here is my js code:

(function ($) {
    $(document).ready(function () {
        var editor = new $.fn.dataTable.Editor({
            ajax: '/api/tblorderstatus',
            table: '#tblorderstatus',
            fields: [
                {
                    label: "Order Status:",
                    name: "tblorderstatus.status",
                    type: "select",
                    options: [
                        { label: "Option1", value: "Option1" },
                        { label: "Option2", value: "Option2" },
                        { label: "Option3", value: "Option3" },
                    ]
                }
            ]
        });
        var table = $('#tblorderstatus').DataTable({
            responsive: true,
            "ordering": false,
            ajax: '/api/tblorderstatus',
                  columns: [
                    { data: "tblorder.business" },
                    { data: "tblorder.name" },
                  { data: "tblorder.orderid" },
                      { data: "tblorderstatus.status" }
                         ],
            select: true,
            lengthChange: false
        });

        $('#orderIdButton').on('keyup click', function () {
            table.search($('#OrderIdText').val()).draw();
        });

        new $.fn.dataTable.Buttons(table, [
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]);

        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));
    });

}(jQuery));

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'm not sure which part of code is refreshing data table.

Me neither! I don't see anything in the above code that would be doing that. Can you give me a link to the page so I can debug it please?

I need to show an empty data table first and then fill it with rows I received from the server.

Sounds like you need to have a condition in your server-side script that will check to see if any ids are submitted. If so, fine, filer on them. If not, then return an empty data set.

Allan

BTalayi

Hi Allan,

As you recommended, I added a parameter in where clause in server side but it didn't work. I believe if I add where to my left join, table refreshing will also be fixed.
Here is my controller:

using System;
            using System.Collections.Generic;
            using System.Net.Http.Formatting;
            using System.Web;
            using System.Web.Http;
            using DataTables;
            using EditorGenerator.Models;
            
            namespace EditorGenerator.Controllers
            {
                public class TblstatusController : ApiController
                {
                    [Route("api/tblorderstatus")]
                    [HttpGet]
                    [HttpPost]
                    public IHttpActionResult Tblorderstatus()
                    {
                        var request = HttpContext.Current.Request;
                        var settings = Properties.Settings.Default;
            
                        using (var db = new Database(settings.DbType, settings.DbConnection))
                        {
                
                var response = new Editor(db, "tblorderstatus", "statusid")
                    .Model<TblOrderstatusModel>("tblorderstatus")
                    .Model<TblOrderModel>("tblorder")
           .Field(new Field("tblorderstatus.orderid_fk")
           .Options("tblorder", "order_id_pk", "name")
           .Validator(Validation.DbValues(new ValidationOpts { Empty = false }))
           )
           .LeftJoin("tblorder", "tblorder.orderid_pk", "=", "tblorderstatus.orderid_fk")
       //   .Where(q => {
       //    q.Where("tblorderstatus.orderid_fk", "(select orderid_fk from tblorderstatus 
      //         where orderid_fk in (":orderid"))", "IN", false)
       //    q.Bind(":orderid", Request.Form["orderIdText"]);
          //  });
                     .Process(request)
                    .Data();

                return Json(response);
            }
        }
    }
}

allan

Use @orderid rather than :orderid.

But also I don't see orderIdText being submitted in your Javascript above, but that's only part of the JS you are using (I presume) which is why I asked if it would be possible to see your page. If that isn't possible can you show me your full JS file please.

Allan

BTalayi

Hi Allan,

I replaced : with @ but didn't work. There is some syntax errors that I can't fix.
Sorry Its not possible to share the whole page here. I just work on part of it.
Here is my full JS. The only Think I need to do is sending OrderIdText value to server and update data table withreturn rows. with this code it works:

 $('#orderIdButton').on('keyup click', function () {
            table.search($('#OrderIdText').val()).draw();
        });

but the problem is page refreshes again with all rows.
I need to add condition for loading databale.
if
orderIdText is empty display: "No rows available"
else
display returned rows from the server

This scenario is exactly like search text box functionality but I don't know how to code it for my input element.

Any help is greatly appreciated.

/*
 * Editor client script for DB table tblstatus
 * Created by http://editor.datatables.net/generator
 */

(function ($) {

    $(document).ready(function () {
        var editor = new $.fn.dataTable.Editor({
            ajax: '/api/tblorderstatus',
            table: '#tblorderstatus',
            fields: [
                {
                    label: "Order Status:",
                    name: "tblorderstatus.status",
                    type: "select",
                    options: [
                        { label: "Option1", value: "Option1" },
                        { label: "Option2", value: "Option2" },
                        { label: "Option3", value: "Option3" }
                    ]
                }
            ]
        });

        var table = $('#tblorderstatus').DataTable({

            responsive: true,
            ordering: false,
            ajax: '/api/tblorderstatus',

            columns: [
                   { data: "tblorder.business" },
                   { data: "tblorder.name" },
                   { data: "tblorder.orderid" }, // I'm not sure if this needs to bind with orderIdText
                   { data: "tblorderstatus.status" }
            ],
            select: true,
            lengthChange: false
        });

        //here I get orderIdText value 
            $('#orderIdButton').on('keyup click', function () {
            table.search($('#OrderIdText').val()).draw();
        });

        new $.fn.dataTable.Buttons(table, [
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]);

        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));
    });

}(jQuery));

allan

Try:

$('#orderIdButton').on('keyup click', function (e) {
           e.preventDefault();
           table.search($('#OrderIdText').val()).draw();
       });

The MDN documentation has a good description of Event.preventDefault().

Allan